FAQ

This is an issue with embedded video players known across the web, where the player would appear to cover up dropdown navigation menus, popup windows, etc. and display as the frontmost element regardless of page layout.

To set the player to display on the same level as its container, you'll need to modify the embed code. You'll need to set the wmode (window mode) parameter to "transparent".

Setting wmode in iframe embeds

If you're using the more recent iframe embed code version, like this one...

<iframe width="500" height="350" src="http://www.youtube.com/embed/JVxe5NIABsI" frameborder="0"></iframe>

You can simply add the following to the end of the src URL:

?wmode=transparent

If there is already a question mark "?" in the src URL, do not add another one. Instead, use the ampersand "&" to add another option to the src:

?autoplay=1&wmode=transparent

Setting wmode in object embeds

Consider the flash object code below.

<object type="application/x-shockwave-flash" data="/player.swf" width="302" height="222">
<param name="base" value=".">
<param name="bgcolor" value="#000000">
<param name="allowfullscreen" value="true">
<param name="flashvars" value="file=http://www.mysite.com/welcomevideo.flv">
</object>

The parameters are set by the <param> codes. You'll need to set the window mode to "transparent" as so, either by adding the following code or by changing the value.

<param name="wmode" value="transparent">