Overlay undurchsichtig Div über Youtube Iframe

110

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?

— Timo Huovinen
quelle

1

Es sieht so aus, als ob YouTube das Problem vollständig behoben hat.

— Timo Huovinen

1

Ich kann das Problem immer noch in Chrome sehen.

— Scribu

@scribu Es könnte sich um Flash-Sicherheitsprobleme handeln oder ich vermisse etwas, das ich auf einem lokalen Server getestet habe.

— Timo Huovinen

Wahrscheinlich. Wie auch immer, die Lösung von Anataliocs hat bei mir funktioniert.

— Scribu

Können Sie dieser Frage das YouTube-Tag hinzufügen?

— Anataliocs

210

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>

— anataliocs
quelle

1

Informationen von Adobe zum Problem: http://kb2.adobe.com/cps/155/tn_15523.html . Nur für das Protokoll.

— Wacek

15

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

— Mike
quelle

10

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

— meder omuraliev
quelle

Ja, ich habe herausgefunden, was das Problem war. In Firefox und Chrom funktioniert es mit normalem Hintergrund. Wenn Sie die Deckkraft hinzufügen, scheint es durch ... Ihre scheint auch durch.

— Timo Huovinen

Das Iframe-Beispiel wurde so bearbeitet, dass es so aussieht, wie meins aussieht. jsfiddle.net/fdsaP/6

— Timo Huovinen

Also ... möchten Sie, dass die Deckkraft auf das Objekt / Einbettungselement innerhalb des Iframes angewendet wird?

— Meder Omuraliev

Ja, ich habe nicht bemerkt, dass der Iframe überlagert wurde, da für mich das Objekt den gesamten Iframe abdeckt. Ich muss das Video abdecken, wenn es möglich ist. Andernfalls ersetze ich es durch ein schwarzes Div mit der gleichen Breite / Höhe und Position.

— Timo Huovinen

@meder danke für den Link und die Lösung! Ich werde es jetzt ausprobieren, aber der Blitz ist immer noch anklickbar :)

— Timo Huovinen

2

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.

— user605723
quelle

0

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.

— Chris
quelle

Safari 4, Chrome und Firefox3.6 klickt immer noch durch?

— Timo Huovinen

1

Ist das nicht was du willst?

— Codebeef

Ich versuche, das in YouTube eingebettete Video aus völlig ästhetischen Gründen hinter einen undurchsichtigen Hintergrund zu stellen :)

— Timo Huovinen