Youtube iframe wmode выдает

Question

Используя javascript с jQuery, я добавляю iframe с URL-адресом YouTube для отображения видео на веб-сайте, однако код для встраивания, который загружается в iframe из YouTube, не имеет wmode = "Opaque", поэтому модальные поля настраница показана под видео YouTube.

Есть идеи, как решить проблему?

Answer 1

Попробуйте добавить ?wmode=opaque к URL-адресу или &wmode=opaque, если уже есть параметр.

Если это не сработает, попробуйте вместо этого &wmode=transparent, который будет работать и в браузере IE.

Answer 2

Попробуйте добавить ?wmode=transparent в конец URL. Работал на меня.

Answer 3

Если вы используете новый асинхронный 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

Answer 4

Добавление ?wmode=opaque к URL, похоже, решает эту проблему для меня, хотя я еще не тестировал его в IE.

Для тех из вас, у кого возникли проблемы с ранее предложенным решением, обратите внимание, что начальноеамперсанд будет работать только в том случае, если вы уже указали в URL другие аргументы.Первый аргумент должен иметь начальный вопросительный знак: http://www.example.com?first=foo&second=bar

Answer 5

Добавьте &wmode=transparent к URL, и все готово, проверено.

Я использую эту технику в своем собственном плагине WordPress Шорткод YouTube

Проверьте его исходный код, если у вас возникнут какие-либо проблемы.

Answer 6

Просто подсказка! - убедитесь, что вы подняли z-индекс элемента, который хотите поместить поверх встроенного видео. Я добавил строку запроса wmode, и она все еще не работала ... пока я не поднял z-индекс другого элемента. :)

Answer 7

недавно я увидел, что иногда флеш-плеер не распознает &wmode=opaque, если вы также должны пройти &WMode=opaque (обратите внимание на верхний регистр).

Answer 8

Я знаю, что это старый вопрос, но он все еще встречается в списке самых популярных запросов по этой проблеме, поэтому я добавляю новый ответ, чтобы помочь тем, кто ищет его для IE:

Добавление &wmode=opaque в конец URL НЕ работает в IE 10 ...

Тем не менее, добавление ?wmode=opaque добивается цели!

---

Нашел это решение здесь: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

Answer 9

&wmode=opaque не работает для меня (хром 10), но &wmode=transparent устраняет проблему.