I’m currently working on a site with the wonderful Hong Vo from Namaste Interactive that has an embedded flash video object on the home page. This site also has a horizontal drop-down menu. All was great until one of the drop down lists became long enough to overlap the flash video. Apparently, when embedding a flash video into an html page the embed code automatically puts the flash video on top of everything else. I could not for the life of me get the menu to lay behind the video no matter what I tried.

It was one of those “little problems” that was eating away my entire morning and most of my patience! ;o) In sadness, I discovered several forum discussions in which, apparently, it was agreed that there was simply nothing to be done.

Thankfully, I was stubborn and continued to dig further (I don’t give up easily!) and found this discussion, which contained a simple solution, which I will summarize for you:

1. Wrap your flash content in a div
2. Add <param name=”wmode” value=”transparent”> to your object tag
3. Set wmode=”transparent” in the embed tag
4. Use css to set the position and z-index for your div (don’t set negative z-index values as it will make your flash disappear)

The CSS

#flash {
  position: relative; /*or absolute*/
  z-index: 0;
}

The XHTML

<div id="flash">
  <object .… >
    <param name="wmode" value="transparent">
    <embed .… wmode="transparent">
  </object>
</div>

And that’s it!

This entry was posted on Friday, April 7th, 2006 at 2:59 pm and is filed under Tips and Tricks, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.