Does your DIV TAG CODE drop behind an embedded video?

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

This entry was posted in News, Tutorials, Videos, Web Development, WordPress Tips. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by sweet Captcha