Welcome to the Virtual Monk community. Here you will find resources, knowledge and inspiration from like minded creatives. Are you a virtual monk..? Get in touch.

Find me on Twitter Find me on Facebook

Connect with me →  

How To Display Content On Top of Embedded Flash

flashHave 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.

This entry was written by Virtual Monk , posted on Friday October 09 2009at 12:10 am , filed under Tutorials and tagged , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

2 Responses to “How To Display Content On Top of Embedded Flash”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>