overlay opaque div over youtube iframe

Question

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?

Solution 1

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>

Solution 2

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

Solution 3

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.

Solution 4

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.

View more solutions

Comments

[Timo Huovinen]

It looks like youtube fixed the issue completely.

[Granger Obliviate]

I can still see the problem in Chrome.

[Timo Huovinen]

@scribu it might be flash security issues or I'm missing something, I tested on a local server.

[Granger Obliviate]

Probably. Anyway, anataliocs' solution worked for me.

[anataliocs]

Can you add the youtube tag to this question?

[Timo Huovinen]

Some people also need &rel=0 for some reason

[Timo Huovinen]

When I first asked this question, people were asking me why I need this and telling me that I should not use iframes, that I should embed youtube videos the normal way, I even got a downvote.

[Timo Huovinen]

Yea, I found out what the problem was, in firefox and chrome it works with normal backgrounds, adding the opacity makes it shine through... yours also shines through.

[Timo Huovinen]

safari 4, chrome and firefox3.6 still clicks through??

[Timo Huovinen]

I'm trying to put the youtube embedded video behind a opaque background for completely aesthetic purposes :)

[Timo Huovinen]

edited the iframe example to look the way that mine looks. jsfiddle.net/fdsaP/6

[meder omuraliev]

So... you want the opacity to apply to the object/embed element inside of the iframe?

[Timo Huovinen]

yes, I did not notice that the iframe was overlayed because for me the object is covering the full iframe, I need the video to be covered if its possible, else ill replace it with a black div of the same width/height and position.

[Timo Huovinen]

@meder thanks for the link and solution! will try it out right now, but the flash is still click-able though :)

[meder omuraliev]

@YuriKolovsky - I fail to see where you specified that you didn't want it to be clickable?

[meder omuraliev]

@YuriKolovsky - since I have a better idea of what you would like now, try jsfiddle.net/fdsaP/16. I embed the opacity layer in the iframe page.

[Timo Huovinen]

@meder, the last #16 jsfiddle looks great, although doing it this way pretty much removes the whole point of the youtube iframe embedding method, youtubeking10.blogspot.com/2010/07/… :)

[meder omuraliev]

Yeah, I'm afraid you really don't have much other options unless I'm aware of something. Though I just recently thought of actually displaying an overlay SWF that takes up 100% of the page and has the opacity layer, which should float over the iframe's object. One could also setup some dynamic service which returns the html source of my yt2.html page modified to serve the overlay or somethin' like that..

[Timo Huovinen]

or I can try asking youtube/google nicely to add the wmode transparent option :)

[meder omuraliev]

You could also try invoking preventDefault on the document's click event... too sleepy to think of any more ideas though

[Timo Huovinen]

thank you for the ideas meder :) your option B would be best, option A is a no-go, because I might as well just embed the video right on the page, this issue that I'm describing will probably get solved by youtube if they notice it.

[meder omuraliev]

Even if you get youtube to render wmode=transparent on their video, it will still be clickable without further action. What's wrong with just embedding the code, again? Do you really need the entire youtube page in the iframe?

[Timo Huovinen]

The idea behind iframing video instead of embedding video is that it puts the responsibility of maintaining the video onto youtubes side, imagine if some new better way of embedding videos came out, this way I don't need to update any the vids on my sites.

[Timo Huovinen]

I have another theoretical solution, maybe I could somehow automatically take a screenshot of the iframe video with javascript and then replace the iframe with the screenshot while the opacity is overlaying it? its not as fancy as overlaying a video that is playing, but it would be better than a plain black box or the click-through video.

[meder omuraliev]

Actually I had the same idea (screenshotting) but it would involve hosting the image, which didnt seem ideal given you just wanting to iframe src it solely.

[meder omuraliev]

@YuriKolovsky - if you're not serving this to hundreds of thousands of people and it isn't resource intensive, then my idea which I proposed, maybe you didnt understand it fully, still stands I think. It was that you could do <iframe src="file.php?url=http://www.youtube.com/blah"> where your file.php grabs the contents of the youtube page, renders them fully, and just simply adds the wmode and/or the overlay. If youtube ever changed the method you'd just have to update this one page alone and it would be fixed all across the board wherever its referenced.

[meder omuraliev]

If the above is resource intensive though, then you could easily use some caching system which would lookup urls that havent been indexed in say, the last week or so... and the new ones would be appended to that cache.

[Timo Huovinen]

oh now I see it, I could even host this on some dedicated page of my own that provides the "fixed" youtube markup! currently it's really not intensive with "admin only" usage and caching would work great. Thanks again for your original solution that you might even document on your bugs archive website :)

[meder omuraliev]

I actually wrote an article already since technically it isn't really a "bug" but just an odd behaviour. But yeah, the site needs a lot of work and the article probably needs to be modified.

[Wacek]

Information from Adobe about the problem: http://kb2.adobe.com/cps/155/tn_15523.html. Just for the record.