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

| Tags: advice, web development, web design

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.  If you are looking for web development in Birmingham then we can help you to fix this issue

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" 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" 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.

do you need a responsive website eguide download - desktop image
do you need a responsive website eguide download - tablet image
do you need a responsive website eguide download - mobile image

Contact Us
Get in touch.

Find us

Scorchsoft Ltd
306B, The Big Peg,
120 Vyse Street,
Birmingham, B18 6NF

Get directions

Loading...