CSS, JavaScript, jquery

fixing Youtube iframe z-index


Fixed. My Youtube iframe z-index is ignored and is above a fixed div

Thu 17th Feb 2011

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&#8221; 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&#8221; 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”)

$(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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s