DesignTechWeb Development
Have you ever embedded a flash movie in the header of your web site, gone home happy thinking all was good in the world, and then woken up in a cold sweat because someone, somewhere, clicked to view an ibox on your site and - gasp! - the flash header appeared above the overlay?! Neither have I... But if this is your (and you're client's) worst night mare, help is here.
Take a look at the code below:
<object id="header_swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="182" wmode="transparent">
<param name="autoplay" value="true" />
<param name="movie" value="/header.swf" />
<param name="wmode" value="transparent"></param>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="/header.swf" width="1000" height="182" wmode="transparent">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
First off, I'll explain the part that you probably came here to learn about - wmode=transparent. You will most often run into problems when using modal windows like jQuery Facebox, or iBox (both of which, I must add, are excellent tools for enhancing user experience on your site). Browsers like Internet Explorer and some versions of Firefox for Windows do not respect z-index properties for flash objects, and will always display the flash object above all other elements. The fix: add wmode=transparent to the object tag. But if you've done this, and are still madly searching the web for a solution because it hasn't worked for some unknown reason - notice how I've placed wmod=transparent in three different places within the code. This is because different browsers work in different ways, and this method will cover all your bases. This is also extremely useful if you are playing a flash movie within the modal window that is itself above a flash movie. Phew!
A note on swfObject: It's great! Use it. Here's a handy tutorial about swfObject on blog.deconcept.com, including a note on wmode=transparent about half way down the page.
If you'd like more information on what the heck that classid attribute for - I found this forum post on techguy.org to be the most informative.
Any other questions or feedback? Feel free to leave a comment below.
Credit: Handy code escaper: www.wtv-zone.com/phyrst/ece/encoder.html