Flash z-index fix by setting wmode to transparent

You should have experienced that a div is being partially or completely covered by a Flash object or Flash movie. No matter how you specifically set the z-index of your DIV to be higher than the Flash movie, it’ll not work on your browsers.

<!-- The DIV -->
<style>
.mydiv {display:block;z-index:300;background:#fff;border:13px solid #ccc;width:500px;}
</style>
<div class="mydiv">
I want to be on top of the Flash movie instead of being under.
</div>
<!-- The Flash object -->
<object classid="clsid:D2GHB6R-A78D-11cf-96B8-7272727272727" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
width="761" height="235">                
<param name="movie" value="/flash/myflash.swf">                
<param name="quality" value="high">                
<embed src="/flash/myflash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="761" height="235">
</embed>		      
</object>

For example a div and a Flash object as shown in the code above. So, the solution for the fix is set wmode=transparent by adding a parameter as follows for it to work in IE.

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

For other browsers, set wmode=”transparent” in the embed tag

<embed wmode="transparent" src="..."/>

So finally the above code has become as follows:

<object classid="clsid:D2GHB6R-A78D-11cf-96B8-7272727272727" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
width="761" height="235">                
<param name="movie" value="/flash/myflash.swf">                
<param name="quality" value="high">      
<param name="wmode" value="transparent">          
<embed wmode="transparent" src="/flash/myflash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="761" height="235">
</embed>		      
</object>

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Flash z-index fix by setting wmode to transparent”


  1. No Comments

Leave a Reply

You must login to post a comment.