Youtube video appearing over fixed elements

youtube_jquery_z-indexIf 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”);
          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.

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