Mengapakah iframe YouTube dalam menu lungsur turun secara berbeza dalam penyemak imbas yang berbeza?

Video YouTube yang dibenamkan dalam iframes mengabaikan z-index dalam penyemak imbas tertentu

Menu navigasi lungsur turun berbilang peringkat dengan video YouTube yang dibenamkan di bawahnya melalui iframe telah menimbulkan masalah pemaparan dalam web tertentu pelayar. Walaupun menu lungsur turun muncul di bahagian atas video dalam Firefox, hanya secebis daripadanya kekal kelihatan dalam Chrome dan IE9.

Penyebabnya, secara mengejutkan, bukanlah iframe, tetapi video YouTube itu sendiri. Apabila menyasarkan iframe ke tapak web luaran lain, menu lungsur turun dipaparkan dengan betul walaupun dalam IE. Ini menunjukkan kemungkinan masalah dengan kod benam YouTube.

Pakar mengesyorkan agar anda memasukkan parameter wmode, yang mempunyai dua nilai:

• Legap
• telus

Walaupun dokumentasi terhad yang menerangkan kesannya, menambahkan parameter ini pada URL video, seperti yang dilihat dalam contoh di bawah, menyelesaikan isu:

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

Sebagai alternatif, skrip jQuery juga boleh digunakan untuk ubah suai semua iframe pada halaman:

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

Pendekatan ini berjaya membatalkan dominasi indeks z video YouTube, membenarkan menu lungsur turun dan elemen lain dipaparkan dengan betul di atasnya.

Atas ialah kandungan terperinci Mengapakah iframe YouTube dalam menu lungsur turun secara berbeza dalam penyemak imbas yang berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!