Flash Video Hiding My CSS Navigation Menu

In one of the sites I was working, I moved the Thesis navigation menu below the imaged header. However, I had a video in the Multimedia Box and the CSS Navigation Menu was dropping below the flash video. Problem! So how do we fix this?

The typical embed code of a flash video from Vimeo (or YouTube, etc) is:

[html] <object width="400" height="225">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9188712&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=9188712&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed></object>[/html]

So, after the <object> tag, but before the <embed> tag, you need to add another <param> tag.

[html]<param name="wmode" value="transparent" />[/html]

And then you need to add within the <embed> tag, wmode="transparent" so that the new embed code says:

[html highlight="3,6"] <object width="400" height="225">
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9188712&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=9188712&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="400" height="225"></embed></object>[/html]

So, that fixes most if not all of the problems (for more information on wmode, see Adobe). If it does not fix the problem, you will need to add z-index: 0; to the CSS containing the flash video and z-index: 99; (99 is an arbitrary number as any number > O can fit here) to the menu system (for further information on the z-index property). If you are using thesis, this code goes into your custom.css. Here is the code that I added (which is probably a little overboard as I believe the .custom .menu portion is not necessary):

[css].custom .image_box {z-index:1;}, .custom_box { border-style: solid; border-color: #ddd; z-index:1;}
.custom #image_box img { background: #fff; border-style: solid; border-color: #bbb; z-index:1;}
.custom .menu ul, .custom .menu ul li { z-index:99; }
.custom .menu ul ul, .custom .menu :hover ul :hover ul { z-index:99; }
.custom .menu li:hover ul, .custom .menu a:hover ul { z-index:99; }
.custom .menu { z-index:99; }
[/css]

So I have eventually landed on just this CSS code:

[css].custom .image_box {z-index:1;}, .custom_box { border-style: solid; border-color: #ddd; z-index:1;}
.custom #image_box img { background: #fff; border-style: solid; border-color: #bbb; z-index:1;}
[/css]