How to fix z-index in YouTube iframes

16 May 2011 by Rick ~ 23 Comments 5807 views

CSS YouTube

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.

If you liked How to fix z-index in YouTube iframes; the posts below might interest you too:

« Live at River Plate

How to scroll smoothly with jQuery »

23 Comments

Edson
May 16, 2011
17:18

Well, it doesn’t work on Google Chrome.

quicoto
May 16, 2011
22:19

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
23:42

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

&wmode=transparent

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

Fantastic! Thanks so much, quicoto.

John
May 31, 2011
22:58

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

quicoto
May 31, 2011
23:01

You’re welcome

Jordan
June 27, 2011
16:24

Thanks much! Saved me so much time and headaches!

quicoto
June 27, 2011
16:25

You’re welcome Jordan

Francisco Jfm
July 5, 2011
02:02

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

quicoto
July 5, 2011
08:12

You’re welcome!

banane
July 20, 2011
14:47

thank you
great tip

Reply

Maeva
October 4, 2011
12:51

Merci, c’est parfait ça fonctionne!

Shade
October 8, 2011
01:06

$(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
10:03

Nice !

Thank you !

sunil
December 20, 2011
16:22

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

Thanks Dude

Kasey
January 8, 2012
21:44

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

Rick
January 9, 2012
08:20

Glad it worked

Jules Bartow
January 10, 2012
23:32

Mucho Gracias Amigo!

Adding

?wmode=transparent

to the YouTube embed URL works like a charm.

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

Arjun
January 20, 2012
07:39

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)

David
February 28, 2012
15:51

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

Robb Duke
March 2, 2012
16:46

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!