유튜브 iframe wmode 문제

jQuery와 함께 자바 스크립트를 사용하여 웹 사이트에 비디오를 표시하기 위해 YouTube URL이있는 iframe을 추가하고 있지만 YouTube에서 iframe에로드 된 포함 코드에는 wmode = "Opaque"가 없으므로 페이지의 모달 상자가 표시됩니다 유튜브 비디오 아래.

문제를 해결하는 방법에 대한 아이디어가 있습니까?

?wmode=opaqueURL에 추가 하거나 &wmode=opaque이미 매개 변수가 있는지 확인하십시오.

작동하지 않으면 대신 &wmode=transparentIE 브라우저에서도 작동합니다.

?wmode=transparentURL 끝에 추가하십시오 . 나를 위해 일했다.

새로운 비동기 API를 사용하는 경우 다음과 같이 매개 변수를 추가해야합니다.

<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
    console.log("onYouTubePlayerAPIReady" + initialVideo);
    player = new YT.Player('player', {
      height: '381',
      width: '681',
      wmode: 'transparent', // SECRET SAUCE HERE
      videoId: initialVideo,      
       playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

이것은 Google 문서 및 예제를 기반으로합니다 : http://code.google.com/apis/youtube/iframe_api_reference.html

?wmode=opaque아직 IE에서 테스트하지는 않았지만 URL에 추가하면 이 문제가 해결되는 것 같습니다.

이전에 제안 된 솔루션에 문제가있는 사람들은 이미 앰퍼샌드가 URL에 다른 인수를 제공 한 경우에만 작동합니다. 첫 번째 인수에는 초기 물음표가 있어야합니다.http://www.example.com?first=foo&second=bar

&wmode=transparentURL에 추가 하면 테스트가 완료된 것입니다.

나는 자신의 워드 프레스 플러그인 YouTube 단축 코드 에서이 기술을 사용합니다.

문제가 발생하면 소스 코드를 확인하십시오.

팁!-삽입 된 비디오 위에 놓으려는 요소의 z- 색인을 확인하십시오. wmode querystring을 추가했는데 여전히 작동하지 않습니다 ... 다른 요소의 z-index를 올릴 때까지. :)

&wmode=opaque나를 위해 작동하지 않았지만 (크롬 10) &wmode=transparent문제를 해결했습니다.

나는 이것이 오래된 질문이라는 것을 알고 있지만 여전히이 문제에 대한 인기 검색어에 나타납니다. 그래서 IE에 대한 질문을 찾는 사람들을 돕기 위해 새로운 답변을 추가하고 있습니다.

&wmode=opaqueIE 10에서는 URL 끝에 추가 할 수 없습니다 ...

그러나 추가 ?wmode=opaque는 트릭을 수행합니다!

이 솔루션을 여기에서 찾았습니다 : http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

최근에 나는 때때로 플래시 플레이어가 인식하지 못하는 것을 보았습니다 &wmode=opaque. 대신 &WMode=opaque에도 전달해야 합니다 (대문자에 유의 하십시오).