Video YouTube Tertanam melalui iframe Mengabaikan z-index?


130

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?


Dapatkah Anda memposting tautan - sulit untuk memberikan respons bermanfaat tanpa kode.
toomanyairmiles



bagi siapa pun bertanya-tanya bagaimana ini bekerja pada tahun 2015, <embed wmode="transparent" ...>bagian adalah semua yang Anda perlu (setidaknya di firefox) dan tidak perlu khawatir tentang pengaturan wmode di url's param' s atau iframes
RozzA

ingatlah bahwa untuk beberapa alasan ada dua jenis tautan youtube yang berbeda: youtube.com/v/video_id dan youtube.com/embed/video_id . V-link mengabaikan z-index di IE, tetapi embed berfungsi dengan baik.
Anton Lyhin

Jawaban:


243

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

6
(Saya OP) Terima kasih semuanya! Saya menemukan solusi serupa di manisheriar.com/blog/flash_objects_and_z_index Kuncinya tampaknya menggunakan kedua nama = "wmode" value = "transparan" pada <param> dan wmode = "transparan" pada <embed>. Seperti yang saya duga, ini bukan masalah iframe. Tampaknya ada masalah dengan Flash yang menginginkan (menuntut?) Z-index tertinggi kecuali Anda memaksanya transparan.
user249493

5
Jika Anda menggunakan API JS iframe, playerVar wmodejuga berfungsi meskipun tidak didokumentasikan.
Richard M

1
Saya telah mengintegrasikan ini dan stil boxbox saya tidak bekerja di ie7 / 8 dan saya masih mendapatkan video di atas. encompasscu.com.au/homeiswheretheheartis apa yang bisa saya lakukan
Dan

6
Opsi? Wmode = transparan berfungsi seperti pesona bagi saya. Saya hanya berharap saya lebih cepat menemukan pertanyaan yang tepat untuk ditanyakan. 24 jam setelah saya mulai mencari, saya menemukan jawaban ini. Terima kasih telah menjawab dan memposting pertanyaan di atas juga!
djmarquette

1
@Dan, lihat edit saya ... Anda mungkin sudah memiliki string kueri dalam kode sematan youtube Anda. (seperti? rel = 0 untuk tidak menampilkan video yang relevan). Jika itu kasusnya gunakan & wmode = transparan (atau buram - Saya pernah mendengar buram menggunakan lebih sedikit sumber daya sistem, jadi saya menggunakannya terutama, kecuali saya punya alasan untuk membuatnya transparan).
Sean Kendle

28

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

Ini bekerja untuk saya sedangkan jawaban yang diterima tidak (bahkan setelah memperbaiki kode). Terima kasih atas perbaikan drop-in.
Tom

? memulai string kueri parameter, & adalah pembatas. Hal-hal dasar. Lihat stackoverflow.com/questions/2667551/…
cdonner

2
Ini memperbaiki masalah saya 10 detik sebelum menyerah!
Malibur

1
Sempurna! Saya sudah lama mencari ini!
Jeroen W

2
Ini opaquetidak Opaque(perhatikan kasus)
Szymon Toda

6

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>

5

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.



2

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>

Ini sudah disarankan dalam banyak jawaban di sini tidak perlu mengulanginya dengan jawaban lain. Jika Anda memiliki sesuatu yang baru untuk ditambahkan, silakan lakukan, jika tidak, jangan hanya mengulangi apa yang sudah diposkan orang lain.
Shadow Wizard adalah Ear For You

2

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)


1

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.


1

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.


1

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>

1

Yang Anda butuhkan di iframe adalah:

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

dan di URL:

http://www.youtube.com/embed/123?wmode=transparent
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.