유튜브 iframe wmode 문제


134

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

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


여전히 문제입니까? 이전에이 솔루션을 사용했지만 최신 Chrome / Firefox / IE에서 원래 문제를 재현 할 수 없습니다.
marcovtwout

답변:


238

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

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


1
좋은! 파이어 폭스 및 크롬에서 작동하지만 어떤 이유로 IE에서는 작동하지 않습니다 ... 어떤 아이디어?
danfromisrael

31
대신 & amp; wmode = transparent 사용
Shabith

29
"& amp; wmode = xxxx"설정은 이미 URL에 매개 변수를 전달한다고 가정합니다. 제 경우에는 없었으므로 대신 URL에 "? wmode = xxxx"를 추가해야합니다.
Matt Huggins

6
차이 opaquetransparent . opaque더 성능이 뛰어나야합니다.
도넛

3
Shabith- "wmode = Opaque"는 "wmode = opaque"여야합니다 (소문자 'o')
John

81

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


내 의견으로는 '투명'이 선호되는 옵션이어야합니다.
Foxinni

18

새로운 비동기 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


7
playerVars에는이 모드에도 wmode가 필요합니다. YT.Player 바로 아래에 있으면 HTML5 플레이어에서만 작동합니다. playerVars에 wmode를 추가하면 해당 매개 변수가 자체 z 순서 문제가있는 Flash 객체로 전송됩니다. 여기를 참조하십시오 : groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/… 이에 따라 답변을 수정하겠습니다.
Dylan McCall

1
나는 이것을 시도했지만 작동하지 않았다. 또한 YouTude 설명서에서 wmode에 대한 참조를 찾지 못했습니다.
sboisse

wmode를 설정하는 방법과 마찬가지로 처음 게시 한 이후 링크가 변경되었습니다. playerVars를 통해 지금 플래시 매개 변수 또는 YouTube 플레이어 매개 변수를 설정할 수 있습니다. 위의 예를 업데이트했습니다.
Plastic Sturgeon

URL에서 쉽게 변경할 수있는 값을 변경하기 위해 전체 API를로드하는 것은 완전히 과잉입니다. 이것을 사용하지 마십시오.
fregante

크롬리스 플레이어와 함께 일하고 이미 UI를 제어하기 위해 JS API를 사용하는 사람들이 있습니다. 우리에게는이 솔루션이 완전히 흔들립니다! 감사합니다
maxijb

8

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

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


내가 보여 주려는 비디오에 관계없이 처음에 검은 색 사각형을 얻었습니다. 테스트 시스템에 플래시가 설치되지 않았으며 플래시 설치 대화 상자가 너무 많이 오프셋되었습니다!
Zeb

3

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

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

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


URL을 튜브에 추가 한 후 & amp; wmode = transparent 추가 모든 브라우저에서 문제를 해결했습니다. Mr Tubal, 감사합니다. :)

1

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


0

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


0

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

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

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


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


&그리고 ?그들이 사용하고있는 다른 설정이 URL에 포함되는 순서에 따라 모두 정확합니다. ?이것이 첫 번째 (또는 유일한) 설정이면 분명히 사용됩니다 &.
Alex

예, 그러나 IE는 특별한 요구가 있습니다. 그것을 시도하고 IE 10에서 작동하는 것과 작동하지 않는 것을보십시오. IE 11에서는 아직 시도하지 않았습니다.
Amber June

0

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.