Overlay undurchsichtig div über youtube iframe

Question

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

edit (weitere Klärung hinzugefügt): HTML5 nähert sich uns, mit mehr und mehr Geräte, die es anstelle von Flash, die die Einbettung von YouTube-Videos kompliziert, zum Glück YouTube bietet eine spezielle einbettbare iFrame mit Griffen alle Video-Einbettung Kompatibilitätsprobleme, aber jetzt die zuvor funktionierende Methode der Überlagerung ein Video-Objekt mit einem semi-transparenten div ist nicht mehr gültig, ich bin jetzt nicht in der Lage, eine <param name="wmode" value="transparent"> zum Objekt, weil es jetzt ein iFrame ist. Wie füge ich also ein undurchsichtiges Div über dem in den iframe eingebetteten Video hinzu?

Answer 1

Informationen von der offiziellen Adobe-Website zu diesem Problem

Das Problem tritt auf, wenn Sie einen youtube-Link einbetten:

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

in einem iFrame, ist der Standard-WModus Fenster, die im Wesentlichen gibt es einen Z-Index größer als alles andere und es wird über alles überlagern.

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

wmode=opaque

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

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>

Answer 2

Beachten Sie, dass die Lösung wmode=transparent nur funktioniert, wenn sie zuerst so ist

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

Nicht

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

Answer 3

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

Wird in Chrome gut wiedergegeben. Benötigen Sie es cross-browser? Es hilft wirklich, spezifisch zu sein.

EDIT : Youtube rendert die object y embed ohne explizite wmode-Einstellung, d.h. standardmäßig "Fenster", was bedeutet, dass es überlagert alles . Sie müssen entweder:

a) Hosten Sie die Seite, die den Objekt/Einbettungscode enthält, selbst und fügen Sie das Param-Element wmode="transparent" zum Objekt und das Attribut zum Einbetten hinzu, wenn Sie beide Elemente verwenden möchten.

b) Finden Sie einen Weg, wie youtube diese angeben kann.

Answer 4

Ich habe einen Tag damit verbracht, mit CSS herumzuspielen, bevor ich anataliocs Tipp fand. hinzufügen wmode=transparent als Parameter für 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, so dass Ihr opaker <div> vor dem iframe stehen würde.

Answer 5

Dient die undurchsichtige Überlagerung ästhetischen Zwecken?

Wenn ja, können Sie das 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;
}

pointer-events: none' ändert das Verhalten des Overlays so, dass es physisch undurchsichtig sein kann. Natürlich funktioniert dies nur in guten Browsern.