Nałóż nieprzezroczysty element div na element iframe YouTube

Jak mogę nałożyć element DIV z półprzezroczystym kryciem na osadzone wideo YouTube iframe?

<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;
}

edytuj (dodano więcej wyjaśnień): Zbliża się HTML5, a coraz więcej urządzeń używa go zamiast Flasha, co komplikuje osadzanie filmów z YouTube, na szczęście YouTube udostępnia specjalną ramkę iFrame do osadzania, która obsługuje wszystkie problemy ze zgodnością osadzania wideo, ale teraz poprzednio działająca metoda nakładania obiektu wideo na półprzezroczysty element div jest już nieaktualna, nie mogę teraz dodać a <param name="wmode" value="transparent">do obiektu, ponieważ jest to teraz iFrame, więc jak dodać nieprzezroczysty element div na wierzchu wideo osadzone w ramce iframe?

Informacje z oficjalnej witryny Adobe na temat tego problemu

Problem występuje, gdy osadzasz link do youtube:

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

w iFrame domyślny tryb wmode jest okienkowy, co zasadniczo daje mu indeks Z większy niż wszystko inne i nakłada się na wszystko.

Spróbuj dołączyć ten parametr GET do swojego adresu URL:

wmode = nieprzezroczysty

tak jak:

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

Upewnij się, że jest to pierwszy parametr w adresie URL. Pozostałe parametry muszą iść dalej

W tagu iframe:

Przykład:

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

Zauważ, że poprawka wmode = transparent działa tylko wtedy, gdy jest pierwsza

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

Nie

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

Hmm ... co się zmieniło tym razem? http://jsfiddle.net/fdsaP/2/

Renderuje w Chrome w porządku. Czy potrzebujesz tego w różnych przeglądarkach? To naprawdę pomaga być konkretnym.

EDYCJA : Youtube renderuje objecti embedbez wyraźnego ustawienia trybu wmode, co oznacza, że ​​domyślnie jest to „okno”, co oznacza, że ​​nakłada wszystko . Musisz:

a) Samodzielnie udostępniaj stronę zawierającą kod obiektu / embed i dodaj element param wmode = "transparent" do obiektu oraz atrybut do osadzenia, jeśli zdecydujesz się obsługiwać oba elementy

b) Znajdź sposób na youtube, aby je określić.

Spędziłem dzień, majstrując przy CSS, zanim znalazłem wskazówkę dotyczącą anatalioców. Dodaj wmode=transparentjako parametr do adresu 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>

Dzięki temu element iframe może dziedziczyć indeks Z swojego kontenera, aby <div>element nieprzezroczysty znajdował się przed elementem iframe.

Czy nieprzezroczysta nakładka jest ze względów estetycznych?

Jeśli tak, możesz użyć:

#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” zmieni zachowanie nakładki, tak aby była fizycznie nieprzezroczysta. Oczywiście zadziała to tylko w dobrych przeglądarkach.