How Can I Overlay an Opaque Div on a YouTube iFrame?

Overlaying Opaque Div over YouTube iFrame

Embedding YouTube videos using iFrames presents a challenge when attempting to overlay a transparent div. While previous methods involving wmode="transparent" are no longer applicable to iFrames, there is a solution that allows for the addition of an opaque div.

The key lies in appending the "wmode=opaque" GET parameter to the YouTube URL. This parameter instructs the iFrame to use opaque mode, resulting in a z-index below that of other elements.

To apply this to the provided code, simply update the URL in the iFrame tag as follows:

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

Note that "wmode=opaque" should be the first parameter in the URL, with any other parameters following it. Once this change is made, the div with ID "overlay" will successfully overlay the YouTube video with the desired opacity.

The above is the detailed content of How Can I Overlay an Opaque Div on a YouTube iFrame?. For more information, please follow other related articles on the PHP Chinese website!