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:

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


That should keep your menus from dropping behind your video. Don’t forget to add this to each video that is near your nav!


  1. Maynard on April 9, 2010 at 9:27 pm

    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?

  2. Scott Ellis on April 9, 2010 at 10:12 pm

    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.

  3. Maynard on April 9, 2010 at 11:12 pm

    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.

  4. Scott Ellis on April 10, 2010 at 1:11 am


    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.

  5. Marcopolo on June 22, 2010 at 10:18 am

    Many thanks bud, forgot about the wmode=”transparent” in the embed tag!! Was driving me crazy!! Thanks again.

  6. Scott Ellis on June 22, 2010 at 1:13 pm

    You bet! Gald it was helpful

  7. Jon on July 28, 2010 at 3:47 pm

    This is not working Chrome…any ideas?

  8. Scott Ellis on July 28, 2010 at 3:53 pm

    Not sure but definitely clear your cache just in case. We use this technique on the site and it works just fine in Chrome.

  9. sid on December 10, 2010 at 2:25 am

    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.

    • Scott Ellis on December 10, 2010 at 7:46 am

      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.

  10. Yogi on January 9, 2011 at 4:54 am

    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….



    • Scott Ellis on January 10, 2011 at 10:19 am


      Glad you found it helpful, that is why I put it up there! Thanks for letting me know.

  11. bsmith on February 22, 2011 at 1:25 am

    Thanks this helped me fix my dropdowns. I forgot to add the wmode=”transparent” once I did that it worked like a charm.

  12. anaz on March 3, 2011 at 4:18 pm

    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?

    • Scott Ellis on March 4, 2011 at 4:01 pm

      Anaz, Don’t quite follow your question…. “but now that youtube switched from to”?

    • Goran on August 9, 2011 at 11:40 am

      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.


      • Crystal on August 24, 2011 at 1:34 pm

        Goran – This is EXACTLY what I needed! I searched all over and found your answer. Thanks SOOOOOOO much!

        • Scott Ellis on August 24, 2011 at 1:36 pm

          Crystal, you are very welcome!

  13. Damodog on July 14, 2011 at 3:05 am

    Absolutely perfect! Just what I was looking for.

  14. sharrington64 on September 16, 2011 at 8:46 am

    Thank you for that fix. It’s amazing what two lines of code can do.

  15. tupaje on October 4, 2011 at 11:15 am

    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.

  16. John Tanedo on November 10, 2011 at 9:05 pm

    What about youtube iframes?

    • Scott Ellis on November 10, 2011 at 9:17 pm


      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.

  17. William Currier on November 17, 2011 at 10:54 pm

    Thank you! ?wmode=transparent Worked just fine 😀

  18. Daniel Briceno on November 24, 2011 at 8:31 am

    Thank you guys for the help with the overlapping menu, you guys saved me! Happy Thanksgiving!

  19. Felipe on November 25, 2011 at 12:13 pm


  20. Mark on January 25, 2012 at 6:33 am

    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?

  21. F.A.Q. | DesiRappers on July 22, 2012 at 1:03 am

    […] 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. […]

    • ganesh on July 26, 2013 at 12:05 pm

      HI Desi, I think you should follow authors instructions, my problem solved, in my wordpress site


  22. A very very very thankful lad on April 30, 2013 at 1:33 am

    I am so grateful to you. I was stumped by this for so long. Thanks so much.

  23. Scott Webb on May 28, 2013 at 11:54 am

    Excellent work…thanks for the help! This has caused me a headache and your fix is what I was looking for! Thanks again.

  24. Vijay on June 11, 2013 at 6:04 am

    For WMV file this method is not working. could you pls help me.
    Thanks in Advance.

    • Scott Ellis on June 11, 2013 at 6:07 am


      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.

  25. Nicki Minaj on June 13, 2013 at 11:03 pm

    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.

  26. Louie on July 18, 2013 at 11:05 am

    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?

  27. ganesh on July 26, 2013 at 12:04 pm

    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

  28. jignesh on January 7, 2014 at 10:00 pm

    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 .

  29. Hassan Javed on June 28, 2015 at 3:59 am

    how can i fall up menu with Dailymotion embeded video? you have any solution?

Leave a Comment