Fix Dropdown Menus That Fall Behind Embeded Video
Update 12/2011: YouTube is now embedding with iframes so you’ll need to add ?wmode=opaque to the end of the video url in the iframe.
For example:
https://youtube.com/watch?v=2TmfGoJEgwg%3Fwmode%3Dopaque
Original Post Starts Here……
Javascript menus which drop down from the main navigation menu (mouse over “About” on this site to see a single item dropdown as an example) have a nasty habit of getting layered behind an embedded video. I haven’t tested this fix on all videos but if you’re embedding YouTube or other videos with similar embed code there is an easy solution.
Inside the actual embed tag you need to add the following parameter
wmode="transparent"
That should keep your menus from dropping behind your video. Don’t forget to add this to each video that is near your nav!
Those “dropdown menus that fall behind embeded video” bug you.
Web pages with prominent links to nowhere (“You 404’d it. Gnarly, dude.”) bug me.
Especially when they're in the main menu on the home page of a self proclaimed IT expert.
Ironic, isn't it?
Maynard, Assume you were referring to the “About” page which is a work in progress, but for now it's fixed.
Thanks for the heads up. No one is perfect.
I usually don't approve comments that add no real value to the conversation or are directly taking an insulting shot at me, though like I said, everyone makes mistakes. But as a thought, rather than sarcasm, try being helpful, people generally respond better to it but I sincerely appreciate your efforts to alert me to the issue.
Wasn't meant to be insulting. I just thought somebody whose '404' page just assumes some lack of skills on the part of the “surfer” (“Surfin’ ain’t easy, and right now, you’re lost at sea.”) could appreciate a little sarcasm. My mistake. Next time (as if…), I'll just alert you to the issue.
Maynard,
No worries man. Thanks for dropping by again. For what it's worth, I totally appreciate sarcasm, the problem is it's very hard to gauge on-line (email, comments, …) so rarely comes across as friendly ribbing and usually comes across harsh and critical, especially if you don't know someone in person, never had beers, …
It's all good.
And FYI, the 404 you saw is the default 404 in the Thesis theme which I just switched to recently. Simply haven't had time to create my own unique and creative 404 but that is forthcoming .
Either way thanks for the reminder that I needed to fix the slug to the about page… at least now it's done.
Many thanks bud, forgot about the wmode=”transparent” in the embed tag!! Was driving me crazy!! Thanks again.
You bet! Gald it was helpful
This is not working Chrome…any ideas?
Not sure but definitely clear your cache just in case. We use this technique on the http://openca.mp/ site and it works just fine in Chrome.
Hi Scott. On the ipad and iphone i have this issue where the Drop down menu would appear behind the youtube embed. does this solve the problem? My developer says that there is no solution.
Sid –
1) On my sites the drop downs don’t work at all on iPhone/iPad b/c they are a “mouse” over event not a “click” event. On the idevices when you touch a link/nave menu on the screen that is essentially a “click” event so the drop-downs never appear to begin with. Not something that can be fixed due to the difference in the interface.
2) Youtube videos don’t usually render at all on iDevices (when embedded in websites) b/c they use flash which isn’t supported.
The summary is I can’t tell you for sure if that would fix it since neither of the elements (drop-down’s or youtube videos) are likely to render on the iPad to begin with.
I can’t find the words to express my appreciation. Thank you so much for this fix. I’ve searched everywhere, and you’ve made it so simple!! It’s all about helping each other….
***HUGS***
🙂
Yogi,
Glad you found it helpful, that is why I put it up there! Thanks for letting me know.
Thanks this helped me fix my dropdowns. I forgot to add the wmode=”transparent” once I did that it worked like a charm.
Hey – thanks for this fix. It worked fine, but now that Youtube switched from to i am not sure how to go about creating a fix for the new code… any tips?
Anaz, Don’t quite follow your question…. “but now that youtube switched from to”?
Yes… there is new embedded Youtube code now which uses iframe.. to fix that new code you should just add parameter ?wmode=transparent to the YouTube URL in the iFrame embed code.
Example:
Goran – This is EXACTLY what I needed! I searched all over and found your answer. Thanks SOOOOOOO much!
Crystal, you are very welcome!
Absolutely perfect! Just what I was looking for.
Thank you for that fix. It’s amazing what two lines of code can do.
Thanks for posting this article. It took me to 3 tries to find this page.
Here is my first keyword I used: “add zindex to flash”
I think if you added this to your meta name=”keywords,” others might find this article quicker.
Thanks again for the help.
tupaje – Thanks for the heads up but google doesn’t index on meta keywords anymore, they were too abused by spammers. You can see the post about it here, they dropped them in 2009. http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html
What about youtube iframes?
John,
Should work fine with the iframe based YouTube embed code. I actually based this off of having the issue with YouTube embded videos. If it’s not working for you give us a URL to look at.
Thank you! ?wmode=transparent Worked just fine 😀
Thank you guys for the help with the overlapping menu, you guys saved me! Happy Thanksgiving!
Thanks!
This is great! What if you want to add a tag to exclude related videos (rel=0) as well? Can you just append back to back tags, or is there something special to add?
Doesn’t seem to be working. Any advice?
Mark,
You can use multiple parameters in the query string, just remember to separate them with an ampersand “&” so the URL might look like http://www.youtube.com/embed/2TmfGoJEgwg?wmode=opaque&rel=0
See all of the YouTube Parameters
[…] My video in Homepage Slider is appearing in front of the dropdown navigation menu! Is there a fix? This is a known problem of YouTube videos, and unfortunately cannot be fixed by us. There is a workaround which will fix the issue, which involves adding 2 simple lines of code to the YouTube embed code. You can read about it here. […]
HI Desi, I think you should follow authors instructions, my problem solved, in my wordpress site
ganesh
I am so grateful to you. I was stumped by this for so long. Thanks so much.
Excellent work…thanks for the help! This has caused me a headache and your fix is what I was looking for! Thanks again.
For WMV file this method is not working. could you pls help me.
Thanks in Advance.
Vijay,
No telling why a WMV file would cause that problem. Could be the player your embedding it into. Either way, you’re probably better off converting that file to an h.264 format or something more standard for the web like mp4.
Thank you so much I tried so much and adding that little bit at the end of my youtube video made it work. Thanks mate.
I don’t think this works anymore. It seems YouTube took the wmode off their supported parameters page. Anyone have any suggestions on how fix this now?
First I doubted and thought it wont work, cause at first I tried ?wmode=transparent, it did not work, cause there had no example on where to put this code.
But your idea solved it. ?wmode=opaque
Thanks you are a genius
Generally IE browser create this kind of issue , Also z-index is not working in this case just put wmode=”transparent” in embed tag and overlap issued resolved .
how can i fall up menu with Dailymotion embeded video? you have any solution?