Проблема з програмою wmode Youtube iframe

Використовуючи 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-адреси, і ви готові, перевірені.

Я використовую цю техніку у власному шрифті YouTube для плагінів Wordpress

Перевірте його вихідний код, якщо у вас виникли проблеми.

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

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

Я знаю, що це давнє запитання, але воно все ще з’являється в топових пошуках цього питання, тому я додаю нову відповідь, щоб допомогти тим, хто шукає його для IE:

Додавання &wmode=opaqueдо кінця URL-адреси НЕ працює в IE 10 ...

Однак додавання ?wmode=opaqueробить трюк!

Знайдено таке рішення тут: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

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