Проблема с YouTube iframe с параметром wmode

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

любые идеи, как решить эту проблему?

133
iframe wmode youtube

9 ответов

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

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

237

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

81

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

18

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

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

8

добавить &amp;wmode=transparent к url-адресу, и вы закончили, протестированы.

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

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

3

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

1

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

0

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

добавлять &wmode=opaque до конца URL не работает в IE 10...

добавление ?wmode=opaque делает трюк!

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

0

недавно я видел, что иногда flash player не распознает &wmode=opaque, istead вы должны пройти &WMode=opaque too (обратите внимание на верхний регистр).

0