Mengapa Benaman Video YouTube Mengatasi z-index dalam Halaman Web?

Benaman Video YouTube Mengatasi z-index

Membenamkan video YouTube melalui iframe boleh membawa kepada tingkah laku yang tidak dijangka dalam halaman web, terutamanya dengan elemen yang berkongsi ruang menegak yang sama. Dalam penyemak imbas tertentu, seperti Internet Explorer (IE9) dan Chrome, lungsur turun atau elemen lain yang dipaparkan di atas video mungkin kelihatan sebahagiannya tersembunyi di sebalik iframe.

Mengapa Ia Berlaku?

Tingkah laku ini bukan disebabkan secara langsung oleh iframe itu sendiri tetapi oleh gaya CSS dalaman yang disertakan YouTube dalam kod benamnya. Gaya ini mengatasi set sifat z-index pada iframe, menyebabkan pembenaman video mempunyai susunan tindanan yang lebih tinggi daripada elemen lain pada halaman.

Penyelesaian: Menambah Parameter wmode

Untuk menyelesaikan isu ini, anda boleh mengubah suai kod benam dengan menambahkan parameter wmode dengan nilai sama ada "legap" atau "lutsinar." Ini memberitahu YouTube untuk melumpuhkan gaya CSS dalamannya dan menghormati indeks-z iframe.

Contoh Kod Benamkan dengan wmode:

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

Alternatif Penyelesaian: JavaScript

Sebagai alternatif, anda boleh menggunakan JavaScript untuk menambahkan parameter wmode secara dinamik pada semua iframe pada halaman. Berikut ialah contoh coretan:

<code class="javascript">$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});</code>

Atas ialah kandungan terperinci Mengapa Benaman Video YouTube Mengatasi z-index dalam Halaman Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!