overlay opaque div over youtube iframe

110
votes

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?

5
htmlcssiframeyoutubeoverlay
It looks like youtube fixed the issue completely. – Timo Huovinen
I can still see the problem in Chrome. – scribu
@scribu it might be flash security issues or I'm missing something, I tested on a local server. – Timo Huovinen
Probably. Anyway, anataliocs' solution worked for me. – scribu
Can you add the youtube tag to this question? – anataliocs

5 Answers

210
votes

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>
15
votes

Note that the wmode=transparent fix only works if it's first so

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

Not 

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
11
votes

Hmm... what's different this time? http://jsfiddle.net/fdsaP/2/

Renders in Chrome fine. Do you need it cross-browser? It really helps being specific.

EDIT: Youtube renders the object and embed with no explicit wmode set, meaning it defaults to "window" which means it overlays everything. You need to either:


a) Host the page that contains the object/embed code yourself and add wmode="transparent" param element to object and attribute to embed if you choose to serve both elements

b) Find a way for youtube to specify those.


2
votes

I spent a day messing with CSS before I found anataliocs tip. Add wmode=transparent as a parameter to the 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>

This allows the iframe to inherit the z-index of its container so your opaque <div> would be in front of the iframe.

0
votes

Is the opaque overlay for aesthetic purposes?

If so, you can use:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'pointer-events: none' will change the overlay behavior so that it can be physically opaque. Of course, this will only work in good browsers.