jQuery와 함께 자바 스크립트를 사용하여 웹 사이트에 비디오를 표시하기 위해 YouTube URL이있는 iframe을 추가하고 있지만 YouTube에서 iframe에로드 된 포함 코드에는 wmode = “Opaque”가 없으므로 페이지의 모달 상자가 표시됩니다 유튜브 비디오 아래.
문제를 해결하는 방법에 대한 아이디어가 있습니까?
답변
?wmode=opaque
URL에 추가 하거나 &wmode=opaque
이미 매개 변수가 있는지 확인하십시오.
작동하지 않으면 대신 &wmode=transparent
IE 브라우저에서도 작동합니다.
답변
?wmode=transparent
URL 끝에 추가하십시오 . 나를 위해 일했다.
답변
새로운 비동기 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=transparent
URL에 추가 하면 테스트가 완료된 것입니다.
나는 자신의 워드 프레스 플러그인 YouTube 단축 코드 에서이 기술을 사용합니다.
문제가 발생하면 소스 코드를 확인하십시오.
답변
팁!-삽입 된 비디오 위에 놓으려는 요소의 z- 색인을 확인하십시오. wmode querystring을 추가했는데 여전히 작동하지 않습니다 … 다른 요소의 z-index를 올릴 때까지. 🙂
답변
&wmode=opaque
나를 위해 작동하지 않았지만 (크롬 10) &wmode=transparent
문제를 해결했습니다.