비메오 동영상 responsive 링크를 붙여넣을 시 영상이 작게 고정되서 보여집니다.

안녕하세요.

전화로도 문의를 드렸었는데 해결이 되지않아 텍스트로 남겨드립니다.

 

비메오 동영상을 올렸고 이 영상을 공유를 클릭하여 iframe 코드를 복사하여 kboard 게시물 작성 시 붙여넣기를 했는데,

원래대로라면 가로 100% 세로 auto로 정렬되어야하는게 맞는데, 영상 영역이 엄청나게 작아진 상태에서 css를 아무리 수정해도 꼼짝도 하지않습니다.

스킨 문제인 듯 하여 스킨을 다른것으로 바꾸거나, 아예 워드프레스 테마를 기본 제공 테마로 변경해서 진행했음에도 아무런 변화가 없습니다.

무엇이 문제인가요?

예시로 하단이 비메오에서 iframe 공유로 복사해온 링크입니다.

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/472953900?title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 참고로 kboard 데모페이지에 제가 vimeo responsive 링크로 올렸는데, 그렇게 해도 동일한 증상이 나타납니다.

    링크는 아래와 같으며, 테마나 워드프레스 문제가 아니라 kboard 플러그인 자체의 문제로 보여집니다.

    https://www.cosmosfarm.com/demo/?uid=5100&mod=document&pageid=1

  • 안녕하세요~^^

    KBoard 플러그인에서 Cross-site scripting (XSS) 공격을 방어하기 위해서

    게시글 작성 시 위험한 문자열을 제거하고 있습니다.

    해당 필터로 인해 추가하신 HTML 코드가 정상적으로 동작되지 않는 듯합니다.

     

    서버에 ModSecurity 등의 방화벽이 설치되어 있으시다면

    워드프레스 관리자 -> KBoard -> 대시보드 페이지에서 XSS공격 차단 비활성화 한 후에도 확인해보시겠어요?

     

    플러그인 내부적으로 개선할 수 있을지 연구해보도록 하겠습니다.

    고맙습니다.

  • 안녕하세요. 질문자입니다.

    말씀하신 XSS공격 차단 비활성화를 한 후 다시 responsive 코드를 붙여넣기 하니, 영상은 가로길이에 맞게 줄어들기는 하나,

    영상 위치가 본래 의도한 곳이 아닌 전혀 다른곳으로 옮겨집니다(현재는 사이트 최상단으로 옮겨집니다).

    저희가 이게 급히 해결해야하는 문제라 조금 서둘러서 해결하고싶은데 다른 추가적으로 더 시도할 수 있는 방법이 있을까요?

  • <iframe> 태그에 position: absolute 속성이 추가되어 있기 때문에

    아이프레임을 감싸고 있는 <div> 태그에 position: relative 속성이 추가되어야 있어야 합니다.

    비회원으로도 확인 가능한 페이지 주소 알려주시면 CSS 코드로 해결이 가능할지 살펴보겠습니다.

    고맙습니다.

  • 안녕하세요 질문자입니다.

    nordskit90@naver.com 이메일로 관련 정보를 보내드렸었습니다.

    현재 public에 공개되면 곤란한 사이트여서 support@cosmosfarm.com 으로 발송해드렸고,

    " RE: 동영상 게시물에 추가 관련하여 전화로 연락드렸던 사람입니다. " 제목의 11월 6일 23:34 에 보내드렸습니다.

    해당 링크에서 자동차 썸네일을 클릭하시면 문제의 그 게시물을 확인해보실 수 있습니다.

    꼭 좀 부탁드리겠습니다. 혹시 추가적인 정보가 필요하시면 바로 댓글 부탁드립니다. 계속 확인하고 있겠습니다.

  • 안녕하세요 질문자입니다.

    이 동영상 링크 문제 해결이 가능한 부분인가요? 많이 바쁘시겠지만 이 부분 해결이 불가능한 문제라면

    저도 클라이언트께 해결 불가능한 부분이라는점에 대해 설명을 해드려야해서 여부라도 알았으면 좋겠습니다.

  • 안녕하세요.

    본문에 올려주신 태그를 해당 게시판에 적용하면 정상적으로 표시되는 듯합니다.

    레이아웃이 깨지는 문제는 스킨을 직접 커스텀하셔서 CSS 코드 문제로 보입니다.

    float: left 속성을 추가하신다면 형제 태그에도 float: left 속성을 추가해주셔야 합니다.

    또한 float: left 속성이 추가된 태그의 부모 태그에도 float: left 속성을 추가하거나

    overflow:hidden 속성을 추가해주셔야 합니다.

     

    커스텀하지 않은 KBoard 게시판 스킨으로 확인해보시면

    레이아웃이 깨지지 않고 표시될 듯합니다.

    현재는 해당 사이트에서 avatar 스킨으로 적용할 경우 정상적으로 표시됩니다.

    확인해보시겠어요?

    고맙습니다.

  • 안녕하세요 질문자입니다.

    영상은 주변 요소 및 상위 요소의 float 해제를 시도해보는 방식으로 해결하였습니다.

    일부 float 해제하니 responsive 영상이 잘 작동합니다.

    도움을 주셔서 감사합니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기