Используя javascript с jQuery, я добавляю iframe с URL-адресом YouTube, чтобы отображать видео на веб-сайте, однако код встраивания, который загружается в iframe из youtube, не имеет wmode = "Opaque", поэтому модальные поля на страница отображается под видеороликом YouTube.
Есть идеи, как решить проблему?
Попробуйте добавить ?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 к URL-адресу, похоже, решает эту проблему для меня, хотя я еще не тестировал ее в IE.
Для тех из вас, у кого возникли проблемы с ранее предложенным решением, обратите внимание, что инициальный амперсанд будет работать только в том случае, если вы уже поставляете другие аргументы в URL. Первый аргумент должен иметь начальный знак вопроса: http://www.example.com?first=foo&second=bar
Добавьте &wmode=transparent к URL-адресу, и все готово, проверено.
Я использую эту технику в своем собственном плагине Wordpress Южный код YouTube
Проверьте исходный код, если у вас возникли проблемы.
Просто подсказка! - убедитесь, что вы указали z-индекс на элемент, который вы хотите по встроенному видео. Я добавил wyode querystring, и он все еще не работал... пока я не повысил z-индекс другого элемента.:)
&wmode=opaque не работал у меня (chrome 10), но &wmode=transparent удалил проблему.
Я знаю, что это старый вопрос, но он все еще встречается в верхних поисках этой проблемы, поэтому я добавляю новый ответ, чтобы помочь тем, кто ищет его для IE:
Добавление &wmode=opaque в конец URL-адреса НЕ работает в IE 10...
Однако добавление ?wmode=opaque делает трюк!
Нашел это решение здесь: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements
Недавно я увидел, что иногда флеш-плеер не распознает &wmode=opaque, istead вы также должны пройти &wmode=opaque (обратите внимание на верхний регистр).