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. You can leave a response, or trackback from your own site.

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

Leave a Reply

garden pests repellant gden pests repellant pests repellant geraniums in the garden maze large storage trunks blue stone coffee table bike rack trunk mount kitchen sink plumbing rough in kitchen sink plumbing rough in sealy tribecca ly tribecca seatribecca myanmarlove lovestories myan myanmar mfh mhm fhm mfm raytheon raythe ray ra ruidoso cabins midnightvelvet.com sesame street.com astro.com mfhm gettysberg ohhla.com ohhla.com