Wie überlagere ich ein halbtransparentes Div über einen YouTube-IFrame?

Einbetten undurchsichtiger Divs über YouTube-iFrames

Das Überlagern eines halbtransparenten Divs über ein YouTube-Iframe-Video kann aufgrund der Einführung von eine Herausforderung darstellen HTML5 und die anschließende Ersetzung von Videoobjekten durch iFrames. Die Standardmethode zum Hinzufügen von Hintergrundtransparenz mithilfe des Parameters „wmode“ ist nicht mehr anwendbar.

Glücklicherweise bietet YouTube eine Lösung, indem es Entwicklern ermöglicht, den Parameter „wmode=opaque“ an die Iframe-URL anzuhängen. Dieser Parameter weist dem Iframe einen niedrigeren Z-Index zu, sodass er von anderen Elementen im Iframe überlagert werden kann Seite.

HTML

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 50;
    color: #fff;
}

Erklärung:

• Die Iframe-URL enthält den Parameter „wmode=opaque“, der dies gewährleistet Der Iframe wird vom Div überlagert.
• Das Div wird mithilfe der Eigenschaft „fixed“ positioniert und erstreckt sich über den gesamten Bildschirm („oben: 0“, „links: 0“, „Breite: 100 %“ und „height: 100 %“).
• Mit „background: rgba(0, 0, 0, 0,8)". Passen Sie den zweiten und dritten Wert (0, 0) an, um die Farbe des Overlays zu ändern.
• Der Z-Index des Div ist auf 50 gesetzt, wodurch es über dem Iframe, aber unter anderen Inhalten auf der Seite platziert wird .