Mengapa Menu Jatuh Turun Saya Muncul Di Bawah Iframe YouTube?

Menu Jatuh Turun Menghalang Video YouTube: wmode to the Rescue

Pembangun kerap menghadapi cabaran untuk menyepadukan video YouTube ke dalam halaman web mereka. Dalam keadaan yang pelik, pengguna telah melaporkan tingkah laku yang mengecewakan di mana menu lungsur turun gagal untuk menindih iframe YouTube dengan betul, sebaliknya muncul di bawahnya. Isu ini telah ditunjukkan dalam penyemak imbas seperti Chrome dan IE9, manakala Firefox kekal tidak terjejas.

Terkejut dengan anomali ini, seseorang mungkin tertanya-tanya mengapa sifat z-index, yang ditetapkan secara eksplisit kepada -999 !important, gagal menyelesaikan masalah masalah. Adakah mungkin CSS dalaman dalam kod benam YouTube mengatasi tetapan yang ditentukan pengguna?

Penyelesaian kepada isu yang membingungkan ini terletak pada menambahkan parameter wmode pada kod iframe YouTube. Dengan menambahkan &wmode=opaque atau &wmode=transparent pada URL src, gelagat menu lungsur turun dipulihkan. Walaupun penjelasan teknikal yang komprehensif untuk pembetulan ini masih sukar difahami, ia menangani konflik indeks-z dengan berkesan.

Berikut ialah contoh kod iframe yang diubah suai:

<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, anda boleh menggunakan mengikuti kod jQuery untuk menambahkan parameter wmode secara automatik pada semua iframe pada halaman anda:

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

Dengan melaksanakan penyelesaian mudah ini, pembangun boleh memastikan tindanan tidak terganggu menu lungsur turun mereka ke atas iframe YouTube, memastikan pengalaman pengguna yang lancar.

Atas ialah kandungan terperinci Mengapa Menu Jatuh Turun Saya Muncul Di Bawah Iframe YouTube?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!