Ever get that annoying issue where your drop down horizontal menu expands down and the YouTube video you embedded with the standard iFrame code remains on top of your menu? This one has buggered me a few times and maybe I’m not the only one but I figured I’d share how to resolve this.
Basically there’s a z-index problem here where iFrames want to always be on the top of the window. The fix is to use a parameter in your embed code from YouTube.
Simply add “?wmmode=transparent” to your video url in the embed code. Here’s an example.
src=”http://www.youtube.com/embed/qDZ_zCynqgA?wmode=transparent”
What it does
Well, wmode=transparent is nothing new but rather an old-school method to explicitly declare layering instructions when using .swf embeds. The “transparent” basically tells the browser to render the .swf below everything that could be positioned above it in a layout.
Hopefully that was useful for someone.