Div Z-Index Issue with Flash Movie

How do I place HTML content above a Flash movie?

Make sure the FlashVar "wmode" is set to "transparent" or "opaque," but NOT the default, "windowed"... then you should be able to use CSS z-index

Google Chrome, Flash and z-index wrong behaviour

Add wmode="transparent" to your <embed> tag. Like the following.

<embed wmode="transparent" 
       height="314" width="516"
       type="application/x-shockwave-flash" 
       id="player"
       name="page_player" 
       src="/swfs/player.swf" 
       allowscriptaccess="always"
       allowfullscreen="true" 
       flashvars="file=/attachments/files/u_t_o_N_1.mp4">

And hide the div of the hello image if that is not necessary.

I hope this helps!

Drag control over flash movie issue?

Add this param to your <object>:

<param name="wmode" value="transparent">

Be aware that there are some issues with this solution (performance, handling hit areas, etc), but this may give you what you need.

Check out this handy demonstration of different WMODEs.

Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie?

If your flash movie is burying your other content you may have luck by adding an additional param element to your embedded object:

<param name="wmode" value="opaque" />

For a longer answer you can see this blog post about stacking windowed / flash content. Adobe has a TechNote about this issue, too.

---

Related Topics