hamparkan div buram di iframe youtube

110

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?

— Timo Huovinen
sumber

1

Sepertinya youtube telah menyelesaikan masalah sepenuhnya.

— Timo Huovinen

1

Saya masih bisa melihat masalahnya di Chrome.

— scribu

@scribu mungkin masalah keamanan flash atau saya melewatkan sesuatu, saya uji di server lokal.

— Timo Huovinen

Mungkin. Bagaimanapun, solusi anataliocs berhasil untuk saya.

— scribu

Bisakah Anda menambahkan tag youtube ke pertanyaan ini?

— anataliocs

210

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>

— anataliocs
sumber

1

Informasi dari Adobe tentang masalah: http://kb2.adobe.com/cps/155/tn_15523.html . Sekadar catatan.

— Wacek

15

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

— Mike
sumber

11

~~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.

— meder omuraliev
sumber

Ya, saya menemukan apa masalahnya, di firefox dan chrome berfungsi dengan latar belakang normal, menambahkan opacity membuatnya bersinar melalui ... milik Anda juga bersinar.

— Timo Huovinen

mengedit contoh iframe agar terlihat seperti milik saya. jsfiddle.net/fdsaP/6

— Timo Huovinen

Jadi ... Anda ingin opacity diterapkan ke objek / elemen embed di dalam iframe?

— meder omuraliev

ya, saya tidak memperhatikan bahwa iframe di-overlay karena bagi saya objek menutupi iframe penuh, saya perlu video untuk ditutup jika memungkinkan, kalau tidak saya akan menggantinya dengan div hitam dengan lebar / tinggi dan posisi yang sama.

— Timo Huovinen

@meder terima kasih atas tautan dan solusinya! akan mencobanya sekarang, tetapi flash masih dapat diklik :)

— Timo Huovinen

2

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.

— pengguna605723
sumber

0

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.

— Chris
sumber

safari 4, chrome dan firefox3.6 masih klik ??

— Timo Huovinen

1

Bukankah itu yang kamu inginkan?

— Codebeef

Saya mencoba untuk meletakkan video yang disematkan di youtube di belakang latar belakang buram untuk tujuan estetika sepenuhnya :)

— Timo Huovinen