A Better Way to Stop IFrames From Covering Site Elements

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!