Bagaimana untuk Melapisi Div Separuh Lutsinar pada IFrame YouTube?

Membenamkan Div Legap pada iFrames YouTube

Menindih div separa telus pada video iframe YouTube boleh menimbulkan cabaran kerana pengenalan HTML5 dan penggantian seterusnya objek video dengan iFrames. Kaedah standard untuk menambahkan ketelusan latar belakang menggunakan parameter "wmode" tidak lagi terpakai.

Mujurlah, YouTube menyediakan penyelesaian dengan membenarkan pembangun menambahkan parameter "wmode=opaque" pada URL iframe. Parameter ini memberikan indeks-z yang lebih rendah kepada iframe, membolehkan ia ditindan oleh elemen lain pada halaman.

HTML

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 50;
    color: #fff;
}

Penjelasan:

• URL iframe termasuk parameter "wmode=opaque", yang memastikan bahawa iframe ditindih oleh div.
• Div diletakkan menggunakan sifat "tetap" dan merentangi keseluruhan skrin ("atas: 0", "kiri: 0", "lebar: 100%", dan "ketinggian: 100%").
• Latar belakang separa lutsinar digunakan pada div menggunakan "background: rgba(0, 0, 0, 0.8)". Laraskan nilai kedua dan ketiga (0, 0) untuk menukar warna tindanan.
• Indeks z div ditetapkan kepada 50, yang meletakkannya di atas iframe tetapi di bawah kandungan lain pada halaman .