We help IT Professionals succeed at work.

How do I get drop-down menu in front of YouTube videos in Wordpress?

Widgett used Ask the Experts™
Greetings, experts.  Here is my dilemma.

I have the CSS drop-down menu slipping behind a flash movie problem.  Specifically YouTube.  

The good news is I know that with the addition of <param name="wmode" value="opaque" /> and then wmode="opaque" to the embed code, all is well.

However, the prospect of adding those code snippets every time I want a YouTube video to behave properly on my site is a bit daunting.

The further good news is that I found, on this site--


--the code attached which should go into functions.php and will add the code automagically for me.

The bad news is I have tried adding the code to my functions.php and nothing happens.  No error, but when I go and poke at the page with Firebug I can see the code was not added.  Which is amusing, since I see the problem in Safari, IE and Chrome--but Firefox works without adding anything.  Go figure.

I have a feeling there is something simple that I am missing in regards to this php code to get it to work in my functions.php.  If someone could help me with that, it would be fantastic.

If you'd like to see the brokenness in action, you can find that here: http://www.onetusk.com/sandbox/

Thanks in advance for your wisdom.
add_filter('the_content', 'add_opaque_to_all_flash');

function add_opaque_to_all_flash($string) {
    $string = str_ireplace('<embed type="application/x-shockwave-flash"', '<param name="wmode" value="opaque"><embed type="application/x-shockwave-flash" wmode="opaque"', $string);
    return $string;

Open in new window

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Avinash ZalaWeb Expert
Give higher z-index to you menu UL and LI css class.

Hope this helps


Addy:  Thanks for the response...I'll give that a shot but just to ensure that I'm following: that should work *instead* of the opaque/transparency fix?


Addy:  Sorry for the delay...bad power outage and internet outage sort of cratered m schedule.

So I added z-index 1 to the DIV encasing the YouTube and z-index 100 to the menu and it's still not working in Safari or Chrome.  It looks like there are issues with both those browsers and z-index but none of the tips I have found seems to fix my solution.

Any further ideas?  Or am I missing something?  Thanks!
Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2.

Also, change your parameters to:


Thank you both for your help...I'm going another direction rather than drop-down, but giving you both points for pitching in to assist.  It's much appreciated.