Fixed. My YouTube iframe z-index is ignored and is above a fixed div.
Posted on Feb 17, 2011 | Comments (5)
If you have a YouTube video embedded within your web page that ignores the z-index of fixed or absolutely positioned DIV elements then here is both the html and the JavaScript (jquery) fix.
Instead of embedding the youtube iframe like this
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI" frameborder="0" wmode="Opaque">
add ?wmode=transparent to the embedded link like this:
Add wmode to fix youtube iframe zindex
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Or, add the following Jquery javascript youtube iframe z-index fix:
Add wmode to fix youtube iframe zindex
$(document).ready(function(){
$('iframe').each(function(){
var url = $(this).attr("src");
var char = "?";
if(url.indexOf("?") != -1){
var char = "&";
}
$(this).attr("src",url+char+"wmode=transparent");
});
});
Voill a, your youtube video will now acknowledge it's z-index and will appear below your other div elements that have a higher z-index.
Did you know we help web designers to to take on programming projects?
Please Get in touch if you need a hand or sign up for our newsletter to stay informed regarding our latest advice.
News Categories
Tech and Strategy Updates
We often have insights, information and resources that are of interest strategically and would like to share these with you.
To receive these emails please:
(It will only takes a few seconds)
Comments (5)
Gil:
Apr 17, 2013 at 04:50 PM
Thank you that worked perfectly.....
giannis:
Apr 23, 2013 at 10:10 PM
thanx mate!
really worked out with the jquery code!
:
Apr 30, 2013 at 08:47 PM
Thanks, the JQueyr really worked out.
:
May 02, 2013 at 04:24 PM
Excelent!!
My small contribution. Just add this:
$(window).load(function(){
$('iframe').each(function(){
var url = $(this).attr("src"), char = url.indexOf("?") != -1 ? '&' : '?';
/* In my case it is only necessary to youtube player */
if(url.indexOf("youtube") != -1){
$(this).attr("src",url+char+"wmode=transparent");
$(this).attr("wmode","Opaque");
}
});
Regards
:
May 03, 2013 at 09:46 AM
Thank you, really saved my time :)
Add a Comment