부트 스트랩에서 fitVids()가 축소되었습니다. div - 단일 iframe에서 여러 비디오를 여는 작은 버그

잘 알려진 플러그인이이 문제와 함께 제공된다는 것이 이상합니다. 나는 그것에 맞서 몇 시간 싸웠고 마침내 이겼다. 나는이 게시물이 같은 이슈에 빠지게 될 사람에게 많은 것을 인정할 것이라고 생각한다.부트 스트랩에서 fitVids()가 축소되었습니다. div - 단일 iframe에서 여러 비디오를 여는 작은 버그

Twitter-Bootstrap (또는 div를 축소/확장 할 수있는 유사한 프레임 워크)이 있다고 가정합니다. 우리 모두 알고 있듯이 iframe은 다른 URL을 표시하기 위해 링크로 타겟팅 할 수 있습니다. 이 경우 다른 YouTube 동영상을 고유 한 iframe에 표시했습니다.

<a href="https://www.youtube.com/embed/Bfwg4wRcnDI" target="#youtube-frame"> 
      Open this video into the youtube iframe 
    </a>

는 축소 #youtube-frame의 부모 #youtubecontainer 있다고 가정하자. 위에 표시된 코드와 같은 #youtube-frame을 타겟팅하는 링크를 클릭하고 .onclick 이벤트를 통해 #youtubecontainer이 펼쳐집니다. 그런 다음 fitVids()이 적용됩니다 (코드의이 지점에서 수행 할 수 없습니다. 실제로 확장되기 전에 #youtubecontainer 은 js에 대해서도 존재하지 않았습니다). 그러나 ... 놀람!

fitVids는() 원시 HTML에서 'SRC'속성을 촬영하고 대상 링크 난 그냥 따랐다을 무시 iframe이, 에 적용하고있다! jQuery fitVids() 플러그인이 primairily #youtube-frame의 'src'속성을 참조합니다. 내 시도 :

'src'에 특정 동영상을 남겨두면 다른 동영상을 덮어 쓰게됩니다.

'src'를 무효로하거나 속성을 완전히 제거하더라도 문제는 해결되지 않으며 원하지 않는 비디오 대신 검은 색 상자 만 표시됩니다. : D

링크에서 두 번째 클릭하면 마침내 나타납니다. 그러나 그것은 성가시다.

jquery.fitvids.js (var 선택자)를 편집하고 모든 'iframe src'선택기를 제거하고 "#youtube_frame"에 대한 항목을 추가하면 문제가 해결되지 않습니다.

나는 피곤했다. 가능한 해결책을 찾았습니다. 나는 또한이 스크립트의 제작자가 그것을 향상시킬 수 있기를 바랍니다 ... 실제로는 이상한입니다. 누군가가 비디오 요소의 종횡비를 유지하려고 할 때 요소의 ID를 가리키는 대신이 스크립트가 ' src '속성 ... 프레임이 하나의 src ..... bah 만 처리 할 수있는 것처럼!

가능한 해결 방법 :

jQuery를에 타이밍과 재생 및 eventhandlers 또는 setTimeout()을 사용하여 올바른 순서를 유지한다. 이렇게하려면 동영상에 연결하는 방법을 변경해야합니다. <a target="#youtube_frame"을 사용하는 대신 fitVids보다 먼저 발생시키는 iframe의 'src'속성을 변경하여 jquery로 클릭을 처리해야합니다.

올바른 순서이다 :

1) Expand the Video Container;

2) fitVids();

3) $('#youtube_frame').attr('src', $(this).attr('href'))

는 (이 마지막 점은 방금 클릭 한 링크)에서 비디오 URL을 고려하여 iframe 대응의 src 속성을 설정합니다. 물론 이것은 click 이벤트에서 실행되는 함수 안에 있어야합니다.

다른 해결책이있는 경우 게시하십시오. fixVids 제작자가이 문제를 알기를 바랍니다. 필자는 개인적으로 플러그인을 완전히 고치는 법을 모르며, 'src'속성 만 남겨 두었습니다.

EDIT: I've just added a testcase: http://jsbin.com/huzedamu/2/edit?js,output Unfortunately jsbin doesn't allow the loading of youtube videos through its website, but you can copy/paste the following pastebin, you'll see the bug more clearly: [no matter what video you choose, at the first try you'll always get what's inside the iframe 'src' attribute, which in the pastebin is a pretty old video]

새로운 단일 페이지 된 테스트 케이스> [http://pastebin.com/uLjJvhxC]

출처

2014-03-13 user3413354