How to fix z-index in YouTube iframes

Add a parameter to force YouTube iframe to set a low z-index.

If you have any element you’ll like to show above a YouTube iframe you just have to add a parameter to the iFrame URL.

wmode=transparent

Add the wmode parameter in the src URL.

Tags:

34 Responses to “How to fix z-index in YouTube iframes”

  1. Edson May 16, 2011 at 5:18 pm #

    Well, it doesn’t work on Google Chrome.

    • quicoto May 16, 2011 at 10:19 pm #

      Weird. I’ve tested the code on Firefox 4, Chrome 11, Safari and IE8.

      Everything worked.

      Try to increase the z-index in the element you wanna put over.

      Regards

    • Todd January 21, 2012 at 11:42 pm #

      It wasn’t working in Chrome for me either, until I added an “&” as follows:

      &wmode=transparent

      or

      src=”http://www.youtube.com/embed/videoseries?list=PL7D65FF0914486CF7&hl=en_US&wmode=transparent”

      Fantastic! Thanks so much, quicoto.

  2. John May 31, 2011 at 10:58 pm #

    Thanks! You just saved me from hours of self torture!

  3. Jordan June 27, 2011 at 4:24 pm #

    Thanks much! Saved me so much time and headaches!

    • quicoto June 27, 2011 at 4:25 pm #

      You’re welcome Jordan 😉

  4. Francisco Jfm July 5, 2011 at 2:02 am #

    Man, I was getting crazy with this f#$ing problem! Thank You!

  5. banane July 20, 2011 at 2:47 pm #

    thank you
    great tip

  6. Maeva October 4, 2011 at 12:51 pm #

    Merci, c’est parfait ça fonctionne!

  7. Shade October 8, 2011 at 1:06 am #

    $(document).ready(function ()
    {$(’iframe’).each(function()
    {var url = $(this).attr(”src”);
    var result = url.search(/youtube/i);
    if(result!=-1)
    {result = url.indexOf(’?’);
    if(result!=-1)
    {$(this).attr(”src”,url+”&wmode=transparent”);
    } else {$(this).attr(”src”,url+”?wmode=transparent”);}
    }
    });
    });

    /*This will fix z-index for all iframes linked to youtube. Requires jQuery */

    • Szed February 20, 2012 at 10:03 am #

      Nice !

      Thank you ! 😉

  8. sunil December 20, 2011 at 4:22 pm #

    thanks this code realy work for me i have solved the z-index problem

    Thanks Dude

  9. Kasey January 8, 2012 at 9:44 pm #

    worked great! tried a few others and this really fixed it! thank you

    • Rick January 9, 2012 at 8:20 am #

      Glad it worked 😉

  10. Jules Bartow January 10, 2012 at 11:32 pm #

    Mucho Gracias Amigo!

    Adding [code]?wmode=transparent[/code] to the YouTube embed URL works like a charm.

    Adding [code][/code]&autoplay=1[code][/code] to the url makes the video… yep you guessed it, auto play.

  11. Arjun January 20, 2012 at 7:39 am #

    Thanks! it works all the way. I would like to answer Mr. Edson thanks it’s working properly you can see it here i used here http://amity.edu/ayf on right side video.

    Quicoto thank you so much for your nice post.

    Arjun Kumar (INDIA)

  12. David February 28, 2012 at 3:51 pm #

    Genius might be a bit strong, but saved me a lot time, thanks

  13. Robb Duke March 2, 2012 at 4:46 pm #

    You can add ?wmode=transparent to the end of the url within the iframe to accomplish the drop-down overlapping the iframe. Worked for me on FF, IE, Chrome and Safari!

  14. Oleg March 10, 2012 at 10:02 pm #

    Great, it works!
    Thanks!

  15. Ger March 28, 2012 at 2:49 am #

    It works perfect!!
    Thanks! 😉

  16. Luis Renato March 30, 2012 at 8:00 pm #

    Hey Todd, many thanks for sharing the wmode solution that worked for you. It worked for mee too!
    Cheers!

  17. Mark November 1, 2012 at 12:25 am #

    You might get better performance with wmode=opaque, as most youtube videos don’t have any transparency.

    • Rick November 1, 2012 at 12:28 am #

      Thanks for the tip Mark, I’ll try it out 🙂

  18. srirang November 7, 2012 at 11:26 am #

    @TODD : Thank you very much, replacing with ? to & works in all browser 🙂

  19. Fab January 19, 2013 at 11:29 am #

    Thanks a lot ! Merci beaucoup (French !)

  20. imran January 23, 2013 at 1:53 pm #

    Thank you so much..

  21. sandy February 27, 2013 at 10:55 am #

    not supporting above code in FF 🙁

  22. sandy February 27, 2013 at 11:14 am #

    i have list of button on page load it working first time, but on click of the second button, drop down appearing behind the iframe 🙁 please help me

  23. José September 8, 2017 at 11:49 pm #

    Well, it doesn’t work on Google Chrome.

    • Rick September 9, 2017 at 7:18 am #

      The post is 6 years old. I’m sure YouTube changed things on its side!

Leave a Reply

Add <code> Some Code </code> by using this tags.