[HTML] Display HTML content over a Flash object

Posted on Thu, 2008-10-09 21:58

When dealing with drop down menus such as the suckerfish menu you will find that the menu disappears behind any Flash object that is on the page.

Unfortunately what works with other HTML elements with the z-index doesn't work with Flash as Flash will end up on top regardless.

To change this we need to add some bits of code to a Flash object to allow HTML to appear on top.

<?php<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/jJpx9MEi6_M&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="wmode" value="transparent" />
<embed src="http://www.youtube.com/v/jJpx9MEi6_M&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344" wmode="transparent"></embed>
</object>?>

What we have done is added the following 2 bits of code:

<?phpwmode="transparent"?>

To the tag and:

<?php<param name="wmode" value="transparent" />?>

In between the

tags. For those that are using better code than the standard markup that websites like YouTube give you, such as using conditional formatting, you can do the same by just adding the param in.
<?php<!--[if !IE]> <--> 
<object type="application/x-shockwave-flash" width="350" height="284" data="http://www.youtube.com/v/jJpx9MEi6_M&hl=en&fs=1"> 
<!--> <![endif]--> 
<!--[if IE]>
<object type="application/x-shockwave-flash" width="350" height="284" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<![endif]--> 
<param name="movie" value="http://www.youtube.com/v/jJpx9MEi6_M&hl=en&fs=1" />  
<param name="wmode" value="transparent" />
<p>Your browser is not able to display this multimedia content.</p> 
</object>?>

Comments

joe

Wed, 2010-02-10 08:11

great report, thanks dude!

Ben

Fri, 2010-04-16 23:23

Hey James,

Thanks for posting this. I'm just putting together a blog and having issues with the drop down not going over the magazeen theme's dock that lies right under the menu. Any thoughts?

Thanks!

admin

Sat, 2010-04-17 00:02

Ben, create a new CSS rule called #suckerfishnav ul ul and set the z-index to something like 10.

#suckerfishnav ul ul { z-index: 10; }