Overlay HTML Over Flash Object

Overview

When building websites that use HTML and Flash, you may find that the flash movie appears above all of your other content such as drop down menus, div boxes and shadow-boxes. It can happen even when you manually enter in the z-index of those elements.

A Note About Z-Index Layering

The z-index of an item determines the layer an item will be rendered on. The higher the z-index number, the closer to the top layer an item will appear. So an item with a z-index of 10 will appear in front of an item with a z-index of 9.

Setting The Z-Index Of An Item

<style>

.your-item {
    z-index: 1000; /* or what whatever number you like */
}
</style>

Overlay HTML Over Flash Object

It can be very frustrating when flash appears above html content and menu. The reason this occurs is that DHTML uses layers to decide which elements stack in front of others. Just as a stack of cards are layered on top of each other. Content like Java or Flash that is embedded into the page ignores the layer order and is by default rendered on the highest layer of the page.

Older browsers are still stuck with this issue but luckily most modern browsers these days have the ability to layer the embedded content along with the rest of your elements. All you need to do to overlay html over flash object is to set the `WMODE` parameter to `transparent` and now it will obey your layering order which is controlled by the swf’s z-index. Other values for WMODE are ‘window’ (default), ‘opaque’, or ‘transparent’.

I will show you two ways on how to enable WMODE when embedding flash in your website.

1st option – Inline Embedding

To set the `WMODE` you need to set it in two place which I have highlighted yellow in the below example.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="380" height="190" id="YourFlashMovie" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="AS3_File_Upload2.swf" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#333333" />
	<embed src="YourFlashMovie.swf" quality="high" wmode="transparent" bgcolor="#333333" width="380" height="190" name="YourFlashMovie" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Now all you need to do is place the flash movie where you want it and optionally set z-index to override the layer it appears on.

2nd option – swfobject (javascript include function)

Alternatively, you can use swfobject and specify similar parameters to acheive the same effect. Swfobject is a javascript file available free from http://code.google.com/p/swfobject/ and can be used to simplify the process of embedding flash into your website.

After downloading the swfobject.js from google code, include it into your page using.

<script type="text/javascript" src="swfobject.js"></script>

And then execute the function as shown below but ensure that you set the param to include `WMODE` as highlighted yellow.

<script type="text/javascript">

var flashvars = {};
var params = {wmode:'transparent'};
var attributes = {};

// divContainer is the div block that will then hold the embedded flash object.
swfobject.embedSWF("flashFile.swf", "divContainer", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

</script>

Prevent Menu From Appearing Behind Flash Object

Once you have completed the above, you can now change the order/layer the flash appears in your page. Your flash object should now obey the layer ordering and setting the z-index on both your flash object and menu should do the trick

Remember: The higher the number, the higher the layer. Higher layers appear on top of lower layers.

&lt;style&gt;

#YourFlashMovie {
    z-index: 1000; /* or what whatever number you like */
}

.yourMenuContainer {
    z-index: 1001; /* or any number as long as it is higher then #YourFlashMovie */
}