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.
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/CyLkALroXGc?wmode=transparent" frameborder="0"></iframe>
Edson
Well, it doesn’t work on Google Chrome.
quicoto
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
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.
John
Thanks! You just saved me from hours of self torture!
quicoto
You’re welcome 😉
Jordan
Thanks much! Saved me so much time and headaches!
quicoto
You’re welcome Jordan 😉
Francisco Jfm
Man, I was getting crazy with this f#$ing problem! Thank You!
quicoto
You’re welcome! 😉
banane
thank you
great tip
Maeva
Merci, c’est parfait ça fonctionne!
Shade
$(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
Nice !
Thank you ! 😉
sunil
thanks this code realy work for me i have solved the z-index problem
Thanks Dude
Kasey
worked great! tried a few others and this really fixed it! thank you
Rick
Glad it worked 😉
Jules Bartow
Mucho Gracias Amigo!
Adding
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
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
Genius might be a bit strong, but saved me a lot time, thanks
Robb Duke
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!
Oleg
Great, it works!
Thanks!
Ger
It works perfect!!
Thanks! 😉
Luis Renato
Hey Todd, many thanks for sharing the wmode solution that worked for you. It worked for mee too!
Cheers!
Mark
You might get better performance with wmode=opaque, as most youtube videos don’t have any transparency.
Rick
Thanks for the tip Mark, I’ll try it out 🙂
srirang
@TODD : Thank you very much, replacing with ? to & works in all browser 🙂
Fab
Thanks a lot ! Merci beaucoup (French !)
imran
Thank you so much..
sandy
not supporting above code in FF 🙁
Rick
What FF version have you tried?
http://www.whatbrowser.org/
sandy
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
Corey Huetter
Thanks a TON for sharing, it solved my problem with http://www.youtube.com/embed/wsa1FZbg47s?wmode=transparent
by adding ?wmode=transparent
Thanks once again
José
Well, it doesn't work on Google Chrome.
Rick
The post is 6 years old. I’m sure YouTube changed things on its side!