general page

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

| Tags: tutorials, hints, tips, advice

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

Did you know we help web designers to to take on programming projects?

Please Get in touch if you need a hand or to stay informed regarding our latest advice.

Free eGuide
Streamline Your Business With Apps and Web Tools

  Download  

wpd_title
  • How to reduce your recurring outgoings.
  • Up-to-date market research.
  • A review of 'The cloud' & what's popular.
  • Case studies and flagship examples.
We may send you other resources from time to time. Don't worry, we won't send spam and you can unsubscribe at any time.

wpd_title

Thank you!

Your "Free eGuide
Streamline Your Business With Apps and Web Tools " should begin transferring in a few seconds. We have also sent you an email link to it for later.

This download should start automatically, however if this doesn't happen right away then please Click Here to begin the download manually



Who are Scorchsoft?

Watch out video

Contact Us
Get in touch.

Find us

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

Get directions

Loading...