Best overlay questions in September 2010

overlay opaque div over youtube iframe :)

Asked on Wed, 29 Sep 2010 by YuriKolovsky javascript html iframe youtube overlay
9 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?

solution: 1. get contents from youtube link 2. create page with altered content (and cache it) 3. use iframe with altered page

object markup (for personal reference):

<!doctype html>
<html>
    <body>
<div id="overlay"></div>
<object width="640" height="385"><param name="wmode" value="transparent"><param name="movie" value="http://www.youtube.com/v/NWHfY_lvKIQ?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed wmode="transparent" src="http://www.youtube.com/v/NWHfY_lvKIQ?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

<script>
    document.onclick = function(e) {
    //e.preventDefault();
    }
</script>
<style>
    * { margin:0; padding:0; }
    #overlay {
    position:fixed;
    width:100%;
    height:100%;
    z-index:5;
    opacity:0.5;
    background:#000;
    }
</style>
</body>
</html>

Answered by anataliocs

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=transparent

like so:

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

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=transparent" frameborder="0"></iframe>