hamparkan div buram di iframe youtube

Bagaimana cara melapisi div dengan opasitas semi-transparan di atas video yang disematkan iframe youtube?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

edit (menambahkan lebih banyak klarifikasi): HTML5 mendekati kita, dengan semakin banyak perangkat yang menggunakannya daripada flash, yang mempersulit penyematan video youtube, untungnya youtube menyediakan iFrame khusus yang dapat disematkan dengan menangani semua masalah kompatibilitas penyematan video, tetapi sekarang metode yang sebelumnya berfungsi untuk melapisi objek video dengan div semi-transparan tidak lagi valid, saya sekarang tidak dapat menambahkan a <param name="wmode" value="transparent">ke objek, karena sekarang menjadi iFrame, jadi bagaimana cara menambahkan div buram di atas video tertanam iframe?

Informasi dari situs resmi Adobe tentang masalah ini

Masalahnya adalah saat Anda menyematkan tautan youtube:

https://www.youtube.com/embed/kRvL6K8SEgY

dalam iFrame, wmode default berjendela yang pada dasarnya memberikan indeks-z lebih besar dari yang lainnya dan akan menutupi apa pun.

Coba tambahkan parameter GET ini ke URL Anda:

wmode = buram

seperti ini:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

Pastikan ini adalah parameter pertama di URL. Parameter lain harus digunakan setelahnya

Di tag iframe:

Contoh:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

Perhatikan bahwa perbaikan wmode = transparent hanya berfungsi jika sebelumnya demikian

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

Tidak

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

Hmm ... apa bedanya kali ini? http://jsfiddle.net/fdsaP/2/

Merender di Chrome dengan baik. Apakah Anda membutuhkannya lintas browser? Ini sangat membantu menjadi spesifik.

EDIT : Youtube merender objectdan embedtanpa set wmode eksplisit, yang berarti defaultnya ke "window" yang berarti menutupi segalanya . Anda perlu:

a) Host halaman yang berisi objek / kode semat sendiri dan tambahkan elemen param wmode = "transparent" ke objek dan atribut untuk disematkan jika Anda memilih untuk menyajikan kedua elemen

b) Temukan cara bagi youtube untuk menentukannya.

Saya menghabiskan satu hari bermain-main dengan CSS sebelum saya menemukan tip anataliocs. Tambahkan wmode=transparentsebagai parameter ke URL YouTube:

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

Ini memungkinkan iframe mewarisi indeks-z penampungnya sehingga opaque Anda <div>akan berada di depan iframe.

Apakah lapisan buram untuk tujuan estetika?

Jika demikian, Anda dapat menggunakan:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'pointer-events: none' akan mengubah perilaku overlay sehingga bisa menjadi buram secara fisik. Tentu saja, ini hanya akan berfungsi di browser yang bagus.