Video YouTube Tertanam melalui iframe Mengabaikan z-index?

Saya mencoba menerapkan menu navigasi dropdown multilevel horizontal. Segera di bawah menu (secara vertikal), saya punya video YouTube yang disematkan melalui iframe. Jika saya mengarahkan kursor ke salah satu item nav level utama di Firefox, menu tarik-turun muncul dengan benar di atas video.

Di Chrome dan IE9, bagaimanapun, hanya sepotong dropdown terlihat di wilayah kecil ruang yang saya miliki antara menu dan iframe. Sisanya tampaknya berada di belakang iframe.

Masalahnya tampaknya terkait dengan video YouTube, bukan iframe. Untuk mengujinya, saya mengarahkan iframe di situs web lain daripada video, dan menu dropdown bekerja dengan baik, bahkan di IE.

• Pertanyaan 1: WTF?
• Pertanyaan 2: Mengapa, meskipun saya secara eksplisit memasang z-index:-999 !important; iframe apakah masalah ini masih terjadi?

Apakah ada beberapa CSS internal yang menyertakan kode embed YouTube yang entah bagaimana mengesampingkan hal-hal?

Coba tambahkan wmode, sepertinya ada dua parameter.

&wmode=Opaque

&wmode=transparent

Saya tidak dapat menemukan alasan teknis mengapa ia berfungsi, atau lebih banyak penjelasan tetapi lihatlah kueri ini .

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

atau ini

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Jawaban Joshc ada di jalur yang benar, tetapi saya menemukan bahwa itu benar-benar menghapus ?rel=0querystring dan menggantinya dengan ?wmode=transparentitem - yang memiliki efek menampilkan daftar Video YouTube yang Disarankan pada akhir pemutaran, meskipun Anda awalnya tidak Aku tidak ingin ini terjadi.

Saya mengubah kode sehingga srcatribut dari video yang disematkan dipindai terlebih dahulu, untuk melihat apakah sudah ada tanda tanya ?di dalamnya (karena ini menunjukkan keberadaan string kueri yang sudah ada sebelumnya, yang mungkin mirip ?rel=0tapi bisa secara teori menjadi apa pun yang dipilih YouTube untuk ditambahkan di masa mendatang). Jika sudah ada string kueri di sana, kami ingin menyimpannya, bukan memusnahkannya, karena itu merupakan pengaturan yang dipilih oleh siapa pun yang disisipkan dalam video YouTube ini, dan mereka mungkin memilihnya karena suatu alasan!

Jadi, jika ?ditemukan, wmode=transparentakan ditambahkan menggunakan format: &mode=transparentuntuk hanya menandai di akhir string kueri yang sudah ada sebelumnya.

Jika tidak ada ?yang ditemukan, maka kode akan bekerja dengan cara yang persis sama seperti yang awalnya (dalam posting toomanyairmiles ), menambahkan ?wmode=transparentseperti string kueri baru ke URL.

Sekarang, terlepas dari apa yang mungkin atau mungkin tidak ada di akhir URL YouTube sebagai string kueri, itu akan dipertahankan, dan wmodeparameter yang diperlukan akan disuntikkan atau ditambahkan tanpa merusak apa yang ada di sana sebelumnya.

Berikut kode untuk dimasukkan ke document.readyfungsi Anda :

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});

Tambahkan saja salah satu dari dua ini ke url src:

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Saya memiliki masalah yang sama di YouTube iframe hanya menyematkan di penjelajah internet.

Indeks-Z diabaikan total, atau video flash hanya muncul pada indeks setinggi mungkin.

Ini yang saya gunakan, sedikit mengadaptasi skrip jquery di atas.

Kode embed saya, langsung dari YouTube ...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

JQuery sedikit diadaptasi dari jawaban di atas ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

Pada dasarnya jika Anda tidak memilih Tampilkan video yang disarankan saat video selesai di pengaturan sematan Anda, Anda memiliki ?rel=0di bagian akhir "src"url Anda . Jadi saya telah menambahkan bit ganti jika ?rel=0ada. Kalau ?wmode=transparenttidak, tidak akan berhasil.

Kami hanya dapat menambahkan ?wmode=transparentke akhir URL YouTube. Ini akan memberitahu YouTube untuk memasukkan video dengan set wmode. Jadi, kode sematan baru Anda akan terlihat seperti ini: -

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

Hanya ini yang bekerja untuk saya:

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

Saya memuatnya di file Wordpress footer.php. Kode ditemukan di komentar di sini (terima kasih Gerson)

wmode = buram atau transparan di awal string kueri saya tidak menyelesaikan apa pun. Masalah ini bagi saya hanya terjadi di Chrome, dan tidak di semua komputer. Hanya satu cpu. Ini terjadi di vimeo embeds juga, dan mungkin yang lain.

Solusi saya untuk melampirkan ke acara 'ditampilkan' dan 'tersembunyi' dari mod bootstrap yang saya gunakan, tambahkan kelas yang menetapkan iframe menjadi 1x1 piksel, dan hapus kelas saat modal ditutup. Sepertinya itu berfungsi dan mudah diterapkan.

Jawabannya tidak benar-benar bekerja untuk saya, saya memiliki acara klik pada pembungkus dan yaitu 7,8,9,10 mengabaikan indeks-z, jadi perbaikan saya adalah memberi pembungkus warna latar belakang dan semuanya tiba-tiba bekerja . Al meskipun itu seharusnya transparan, jadi saya mendefinisikan pembungkus dengan warna latar belakang putih, dan kemudian opacity 0,01, dan sekarang berfungsi. Saya juga punya fungsi di atas, jadi bisa jadi kombinasi.

Saya tidak tahu mengapa itu bekerja, saya senang itu bisa.

Kode Javascript BigJacko bekerja untuk saya, tetapi dalam kasus saya, saya pertama kali harus menambahkan beberapa kode "noconflict" JQuery. Berikut versi revisi yang berfungsi di situs saya:

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

Yang Anda butuhkan di iframe adalah:

...wmode="opaque"></iframe>

dan di URL:

http://www.youtube.com/embed/123?wmode=transparent