Overlay undurchsichtig Div über Youtube Iframe

Wie kann ich ein Div mit halbtransparenter Deckkraft über ein eingebettetes Youtube-Iframe-Video legen?

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

Bearbeiten (weitere Erläuterungen hinzugefügt): HTML5 kommt auf uns zu, mit immer mehr Geräten, die es anstelle von Flash verwenden, was das Einbetten von YouTube-Videos erschwert. Zum Glück bietet YouTube einen speziellen einbettbaren iFrame, der alle Kompatibilitätsprobleme beim Einbetten von Videos behandelt Jetzt ist die zuvor funktionierende Methode zum Überlagern eines Videoobjekts mit einem halbtransparenten Div nicht mehr gültig. Ich kann <param name="wmode" value="transparent">dem Objekt jetzt kein mehr hinzufügen , da es jetzt ein iFrame ist. Wie füge ich also ein undurchsichtiges Div hinzu? das iframe eingebettete Video?

Informationen von der offiziellen Adobe-Website zu diesem Problem

Das Problem ist, wenn Sie einen YouTube-Link einbetten:

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

In einem iFrame ist der Standard-WM-Modus mit Fenstern versehen, wodurch er im Wesentlichen einen Z-Index erhält, der größer als alles andere ist, und er überlagert alles.

Versuchen Sie, diesen GET-Parameter an Ihre URL anzuhängen:

wmode = undurchsichtig

wie so:

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

Stellen Sie sicher, dass dies der erste Parameter in der URL ist. Andere Parameter müssen nachgehen

Im iframe-Tag:

Beispiel:

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

Beachten Sie, dass der Fix wmode = transparent nur funktioniert, wenn dies zuerst der Fall ist

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

Nicht

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

Hmm ... was ist diesmal anders? http://jsfiddle.net/fdsaP/2/

Rendert in Chrome gut. Benötigen Sie es browserübergreifend? Es hilft wirklich, spezifisch zu sein.

BEARBEITEN : Youtube rendert das objectund embedohne expliziten wmode-Satz, was bedeutet, dass standardmäßig "window" verwendet wird, was bedeutet, dass alles überlagert wird . Sie müssen entweder:

a) Hosten Sie die Seite, die den Objekt- / Einbettungscode enthält, selbst und fügen Sie dem Objekt wmode = "transparentes" Parameterelement und dem einzubettenden Attribut hinzu, wenn Sie beide Elemente bedienen möchten

b) Finde einen Weg für youtube, diese zu spezifizieren.

Ich habe einen Tag damit verbracht, mich mit CSS zu beschäftigen, bevor ich einen Anataliocs-Tipp gefunden habe. Fügen Sie wmode=transparentals Parameter an die YouTube - URL:

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

Dadurch kann der Iframe den Z-Index seines Containers erben, sodass sich Ihr undurchsichtiges <div>Objekt vor dem Iframe befindet.

Ist die undurchsichtige Überlagerung aus ästhetischen Gründen?

Wenn ja, können Sie verwenden:

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

'Zeigerereignisse: keine' ändert das Überlagerungsverhalten so, dass es physisch undurchsichtig sein kann. Dies funktioniert natürlich nur in guten Browsern.