Masalah wmode iframe Youtube

Menggunakan javascript dengan jQuery, saya menambahkan iframe dengan url youtube untuk menampilkan video di situs web namun kode sematan yang dimuat di iframe dari youtube tidak memiliki wmode = "Opaque", oleh karena itu kotak modal di halaman ditampilkan di bawah video youtube.

Ada ide bagaimana mengatasi masalah ini?

Coba tambahkan ?wmode=opaqueke URL atau &wmode=opaquejika sudah ada parameter.

Jika tidak berhasil, coba ini sebagai gantinya, &wmode=transparentyang akan berfungsi di browser IE juga.

Coba tambahkan ?wmode=transparentdi akhir URL. Bekerja untuk saya.

Jika Anda menggunakan API asinkron baru, Anda perlu menambahkan parameter seperti ini:

<!-- 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
      }
    });
}

Ini didasarkan pada dokumentasi google dan contohnya di sini: http://code.google.com/apis/youtube/iframe_api_reference.html

Menambahkan ?wmode=opaqueke URL tampaknya menyelesaikan masalah ini bagi saya, meskipun saya belum mengujinya di IE.

Bagi Anda yang mengalami masalah dengan solusi yang diusulkan sebelumnya, perhatikan bahwa inital ampersand hanya akan berfungsi jika Anda sudah memasukkan argumen lain ke URL. Argumen pertama harus memiliki tanda tanya awal:http://www.example.com?first=foo&second=bar

Tambahkan &wmode=transparentke url dan Anda selesai, diuji.

Saya menggunakan teknik itu di shortcode YouTube plugin wordpress saya

Periksa kode sumbernya jika Anda mengalami masalah apa pun.

Hanya tip! - pastikan Anda menaikkan indeks-z pada elemen yang Anda inginkan di atas video yang disematkan. Saya menambahkan querystring wmode, dan itu masih tidak berfungsi ... sampai saya menaikkan indeks-z dari elemen lainnya. :)

&wmode=opaquetidak berhasil untuk saya (chrome 10) tetapi &wmode=transparentmenyelesaikan masalah dengan benar.

Saya tahu ini adalah pertanyaan lama, tetapi masih muncul di pencarian teratas untuk masalah ini jadi saya menambahkan jawaban baru untuk membantu mereka yang mencari satu untuk IE:

Menambahkan &wmode=opaqueke akhir URL TIDAK berfungsi di IE 10 ...

Namun, menambahkan berhasil ?wmode=opaque!

Temukan solusi ini di sini: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

Baru-baru ini saya melihat bahwa kadang-kadang flash player tidak mengenali &wmode=opaque, tetapi Anda harus lulus &WMode=opaquejuga (perhatikan huruf besar).