Flash Object And Z-Index: How To Make Them Play Nicely Together

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)

:c:

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

:x:

<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 Flash, Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

96 Responses to “Flash Object And Z-Index: How To Make Them Play Nicely Together”