How to make your flash video appear behind a drop down menu
wmode is at default: "window"
One of my recent projects is to upgrade the website for a Caribbean resort. One of the small issues the previous developer left out was that the embedded video on a page such as the video gallery would appear infront of the drop down menu items, thus making the navigation hard to read. This is due to the default nature of flash video’s “wmode” which is set to “window.”
This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn’t. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser’s HTML rendering surface. This is why this default mode doesn’t allow proper compositing with DHTML layers. This is why DeepBlueUtila’s drop-down menus previously dropped behind the youtube Flash movie.
So, if you are using dreamweaver, an easy way to fix this is to, from the wyswig view, right click on the embedded flash element and select “parameters.” Then create a new parameter of “wmode” with a value of “opaque”. Now it should work.\
May 10, 2012 Update: the embed code divided by YouTube is now an Iframe, so this post is now outdated. You don’t have to use the old embed code just place ?wmode=transparent after the src in the iframe (src=”http://www.youtube.com/embed/J0NIMTPYYcU?wmode=transparent”)
wmode is now set to "opaque"