HTML/Div Layering over Flash and Transparent Background with Windowless Mode

To lay HTML elements such as a DIV over a Flash object, the Flash object must be embedded with windowless mode. Setting the mode to windowless also allows the web page to show an image or a background through the Flash object embedded on the page. The only drawback with using windowless mode is performance. Most of the time the difference in performance would not be noticeable. However, if performance was a top concern then alternate designs should be considered.

To set the mode to windowless or transparent, the "wmode" parameter should be set to "transparent" as follows. The way the mode is changed depends on the browser. On IE the OBJECT tag is used. On Firefox the EMBED tag is used instead. To accommodate for all browsers use SWFObject or put the EMBED tag inside the OBJECT tag right before "</OBJECT>".

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" id="objectId">
<PARAM NAME=movie VALUE="flashfile.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<param name="wmode" value="transparent">
</OBJECT>

<EMBED src="/support/flash/ts/documents/myFlashMovie.swf"
quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="embedId" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"
wmode="transparent"></EMBED>

Using my favorite way of embedding flash, SWFObject:

<script type="text/javascript">
   var so = new SWFObject("flashfile.swf", "objectId", "400", "100%", "8", "#336699");
   so.addParam("quality", "high");
   so.addParam("wmode", "transparent");
   so.write("flashelement");
</script>

For more information there is a TechNote about this from Adobe.