How To Display Content On Top of Embedded Flash
Have you ever wanted to display content on top of a flash? Here’s how. Click here to see an example and don’t forget to download the source files.
By default, browsers place embedded plug-in content, such as a Flash, on the top most layer. Using the WMODE parameter allows the layering of Flash content with DHTML layers. A WMODE value of ‘opaque’ or ‘transparent’ will prevent Flash from being displayed in the topmost layer and allows us to adjust the layering of the movie within other layers of the HTML document.
Take a look at the code below. Notice the highlighted lines.
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”830″ height=”160″>
<param name=”wmode” value=”transparent”>
<param name=”movie” value=”flash/bg.swf” />
<param name=”quality” value=”high” />
<embed src=”flash/bg.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”830″ height=”160″ wmode=”transparent” ></embed>
</object>
For this to work properly you must add the WMODE parameter in the object tag, as well as the embed tag. Looking at the example, I just used a negative margin to display my navigation above the flash movie. To learn about styling that navigation, check out my post Styling Navigation Using Lists – The Basics.
