overlay opaque div over youtube iframe

Question

How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video    lt iframe class  youtube-player  type  text html  width  520  height  330  src  http   www youtube com embed NWHfY lvKIQ  frameborder  0  gt  lt  iframe gt   lt div id  overlay  gt  lt  div gt    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  lt param name  wmode  value  transparent  gt  to the object  because it is now a iFrame  so how do I add a opaque div on top of the iframe embedded video

User · Answer

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.

User · Answer

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

User · Answer

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    lt iframe class  youtube-player  type  text html  width  520  height  330  src  http   www youtube com embed NWHfY lvKIQ wmode opaque  frameborder  0  gt  lt  iframe gt

User · Answer

Note that the wmode transparent fix only works if it s first so  http   www youtube com embed K3j9taoTd0E wmode transparent amp rel 0   Not   http   www youtube com embed K3j9taoTd0E rel 0 amp wmode transparent

User · Answer

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

[html] overlay opaque div over youtube iframe

Examples related to html

Examples related to css

Examples related to iframe

Examples related to youtube

Examples related to overlay