110

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?

Netorica
  • 18,523
  • 17
  • 73
  • 108
Timo Huovinen
  • 53,325
  • 33
  • 152
  • 143

5 Answers5

211

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>
anataliocs
  • 10,427
  • 6
  • 56
  • 72
  • 1
    Information from Adobe about the problem: [http://kb2.adobe.com/cps/155/tn_15523.html](http://kb2.adobe.com/cps/155/tn_15523.html). Just for the record. – Wacek Jul 10 '11 at 11:37
15

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
Mike
  • 457
  • 3
  • 13
11

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.


Waynn Lue
  • 11,344
  • 8
  • 51
  • 76
meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • 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 Sep 29 '10 at 09:50
  • edited the iframe example to look the way that mine looks. http://jsfiddle.net/fdsaP/6/ – Timo Huovinen Sep 29 '10 at 09:59
  • So... you want the opacity to apply to the object/embed element inside of the iframe? – meder omuraliev Sep 29 '10 at 10:00
  • 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 Sep 29 '10 at 10:02
  • @meder thanks for the link and solution! will try it out right now, but the flash is still click-able though :) – Timo Huovinen Sep 29 '10 at 10:22
  • @YuriKolovsky - I fail to see where you specified that you didn't want it to be clickable? – meder omuraliev Sep 29 '10 at 10:23
  • @YuriKolovsky - since I have a better idea of what you would like now, try http://jsfiddle.net/fdsaP/16/. I embed the opacity layer in the iframe page. – meder omuraliev Sep 29 '10 at 10:28
  • @meder, the last #16 jsfiddle looks great, although doing it this way pretty much removes the whole point of the youtube iframe embedding method, http://youtubeking10.blogspot.com/2010/07/embed-youtube-vidoes-with-iframe.html :) – Timo Huovinen Sep 29 '10 at 10:29
  • 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.. – meder omuraliev Sep 29 '10 at 10:34
  • or I can try asking youtube/google nicely to add the wmode transparent option :) – Timo Huovinen Sep 29 '10 at 10:44
  • You could also try invoking `preventDefault` on the document's click event... too sleepy to think of any more ideas though – meder omuraliev Sep 29 '10 at 10:48
  • 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. – Timo Huovinen Sep 29 '10 at 10:51
  • 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? – meder omuraliev Sep 29 '10 at 10:59
  • 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 Sep 29 '10 at 11:02
  • 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. – Timo Huovinen Sep 29 '10 at 11:04
  • 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 Sep 29 '10 at 11:05
  • @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 ` – meder omuraliev Sep 29 '10 at 11:08
  • 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. – meder omuraliev Sep 29 '10 at 11:13
  • 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 :) – Timo Huovinen Sep 29 '10 at 11:15
  • 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. – meder omuraliev Sep 29 '10 at 11:18
3

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.

user605723
  • 31
  • 1
0

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.

Chris
  • 3,729
  • 22
  • 30