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 August 6, 2009 by Alex Mansfield

8 responses to “Menus Hiding Behind Flash”

  1. Peter says:

    I always seem to run into this issue – I didn’t realize it had anything to do with wmode. Thanks for the tip!

  2. Andrew says:

    Worked like a charm. Great detail and a great find/share. Thank you very much. The screen shots were a big help.

  3. I’m glad you both found it useful!

  4. PraZ says:

    Legend! Thanks

  5. Sneha says:

    It worked! Thanks!!

  6. Neal says:

    Hey Alex – thanks for the post.

    If I’m using a shortcode embed like this:

    [embed width="490" height="279"]http://youtu.be/dyhQB466et4[/embed]

    where would I add those parameters?

    Hoping you can help. Many thanks,

    Neal

  7. alexmansfield says:

    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 Reply

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

  • PublishedAugust 6, 2009
  • Posted InHacks