A Better Way to Stop IFrames From Covering Site Elements

Posted on Jul 7, 2011 in Web Design | 4 comments

Not long ago I discussed the solution I had painstakingly found to the problem of drop-down menus hiding behind YouTube videos. Less than two weeks later, esteve posted a link in the comments to a better solution to Fix YouTube iFrame Overlay and Z-Index Issues.

Interestingly enough, I notice that the original problem appears in Internet Explorer 9 and Google Chrome 12, but not Firefox 5. I have tested the following solution successfully in all three browsers.

Simply take the normal YouTube embed code, for example:

<iframe width="280" height="189" src="http://www.youtube.com/embed/GDFUdMvacI0" frameborder="0" allowfullscreen></iframe>

Then add “?wmode=opaque” to the end of the URL, like so:

<iframe width="280" height="189" src="http://www.youtube.com/embed/GDFUdMvacI0?wmode=opaque" frameborder="0" allowfullscreen></iframe>

That’s it. In the case of the site I was working on, I didn’t even need to specify any z-index values; the drop-down menus correctly went on top of the video. You may need to specify z-index properties for your elements to make sure they stack in the correct order.

Thanks, esteve and Max Morgan Design!

4 Comments

  1. Max here – saw your site show up in my referrers list. You’re very welcome!

  2. thanks, this is brilliant and WORKS. after trying out several other alternate solutions this is the only one that did the job and it as the easiest.

  3. Thank you for this info! I have been researching and trying so many different things and this fixed it! You made my day!

  4. Thank you for sharing this and it works. Thanks.

Trackbacks/Pingbacks

  1. How to Stop YouTube Videos From Hiding Behind Drop-Down Menus | Alamoxie - [...] have since found an easier way to prevent IFrames from overlapping other content. Have you ever had this problem?…
  2. How to get an embedded video to go behind navigation | Gloria Wadzinski - [...] Here are some of my sources: http://www.jenkaufman.com/youtube-iframe-embed-video-problem-hides-menus-other-layers-546/ and http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements/ [...]
  3. How to: Youtube iframe wmode issue | SevenNet - […] Found this solution here: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements […]
  4. Solution: Youtube iframe wmode issue #dev #answer #programming | Good Answer - […] Found this solution here: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements […]
  5. Resolved: Youtube iframe wmode issue #it #development #programming | IT Info - […] Found this solution here: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements […]

Submit a Comment

Manage your comment subscriptions