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 src=”http://www.youtube.com/embed/VZh52iaav8I” frameborder=”0″ width=”640″ height=”360″></iframe>
add ?wmode=transparent to the embedded link like this:
FYI the “?” in front of –> wmode=transaprent is NOT part of the YOUTUBE VIDEO URL, it is part of wmode=transaprent !!!
Add wmode to fix youtube iframe zindex
<iframe title=”YouTube video player” width=”640″ height=”360″ src=”http://www.youtube.com/embed/VZh52iaav8I?wmode=transparent” frameborder=”0″ wmode=”Opaque”></iframe>
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”)
$(this).attr(“src”,url+”?wmode=transparent”)
);
);
Voilla, your youtube video will now acknowledge it’s z-index and will appear below your other div elements that have a higher z-index.
This FIX is courtesy of Andrew Ward and it was worth repeating!
Thanks Andrew
http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix