We've all been there, you embed a Youtube video onto a website that has fixed position DIV elements within the page, scroll, and are greeted with a nasty effect of the video seemingly appearing above these fixed position components. You've probably tried changing the "Position" CSS property from relative to absolute, as well as changing the z-index value on the various HTML elements with no success.
The issue is actually down to the styling and handling of the video within the iFrame itself, so the above actions won't help. Fortunately there is a simple solution to this widespread problem:
HTML solution
Here is what the embed code may typically look like as provided by YouTube:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI" frameborder="0" wmode="Opaque">
Try taking the above code and add in ?wmode=transparent to the embedded link like this:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Or, if you would like a more automated site-wide solution then you may want to try this following JQuery snippet to do the leg-work for you.
JavaScript Solution
$(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 value.
