Home/ Questions/Q 3799342
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T13:43:03+00:00

How can I overlay a div with semi-transparent opacity over a youtube iframe embedded

  • 0

How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?

<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 (added more clarification):
HTML5 is approaching us, with more and more devices that use it instead of flash, which complicates the embedding of youtube videos, thankfully youtube provides a special embeddable iFrame with handles all of the video embedding compatibility issues, but now the previously working method of overlaying a video object with a semi-transparent div is no longer valid, I am now unable to add a <param name="wmode" value="transparent"> to the object, because it is now a iFrame, so how do I add a opaque div on top of the iframe embedded video?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Information from the Official Adobe site about this issue

    The issue is when you embed a youtube link:

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

    in an iFrame, the default wmode is windowed which essentially gives it a z-index greater then everything else and it will overlay over anything.

    Try appending this GET parameter to your URL:

    wmode=opaque

    like so:

    https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

    Make sure its the first parameter in the URL. Other parameters must go after

    In the iframe tag:

    Example:

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