How to Overlay a Semi-Transparent Div over a YouTube IFrame?

Embedding Opaque Divs over YouTube iFrames

Overlaying a semi-transparent div over a YouTube iframe video can pose a challenge due to the introduction of HTML5 and the subsequent replacement of video objects with iFrames. The standard method of adding background transparency using the "wmode" parameter is no longer applicable.

Fortunately, YouTube provides a solution by allowing developers to append the "wmode=opaque" parameter to the iframe URL. This parameter assigns a lower z-index to the iframe, enabling it to be overlaid by other elements on the page.

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

Explanation:

• The iframe URL includes the "wmode=opaque" parameter, which ensures that the iframe is overlaid by the div.
• The div is positioned using the "fixed" property and spans the entire screen ("top: 0", "left: 0", "width: 100%", and "height: 100%").
• A semi-transparent background is applied to the div using "background: rgba(0, 0, 0, 0.8)". Adjust the second and third values (0, 0) to change the color of the overlay.
• The z-index of the div is set to 50, which places it above the iframe but below other content on the page.