Menus Hiding Behind Flash

hiding-menus

I ran across an issue today where a drop down menu was dropping behind a flash object rather than in front. It seems to be a pretty common problem, so I thought I’d share the solution.

1. Start with the embed code

To make sure that the drop-down menu appears above the flash object, there’s a single parameter we need to add to the embed code. First of all, here’s what a normal YouTube embed code looks like:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>

2. Add a parameter

We’ll need to add the parameter in two places. First we’ll need to add the following code after the other param fields (or before, it doesn’t really matter).

<param name="wmode" value="transparent">

Next, wmode=”transparent” needs to be added to the actual embed tag like this:

<embed
wmode="transparent"
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>

That’s it!

So all together, this is how it should look when we’re done:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<embed
type="application/x-shockwave-flash"
width="425"
height="344"
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
allowscriptaccess="always"
allowfullscreen="true"
wmode="transparent">
</embed>
</object>

Hope that helps!

Image by Lili Vieira de Carvalho

Posted in

8 thoughts on “Menus Hiding Behind Flash”

  1. That’s a good question, Neal, but I’m not sure if it’s even possible using the shortcode method. I tried a number of different ways of doing things, but none of them seemed to make any difference. If you end up needing to use the full embed code to make things work properly, you might want to check out the Easy Embed plugin I wrote to keep WordPress from messing with section of HTML such as embed codes:

    http://wordpress.org/extend/plugins/easy-embed/

Leave a Comment

Your email address will not be published. Required fields are marked *