general page

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

Posted on Feb 17, 2011  | 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 Mobile Responsive eGuide

  Download  

wpd_title
  • Key information to support your mobile approach.
  • Information about what your customers think.
  • Up-to-date mobile market research.
  • Guidance to help you to decide between a mobile app or web app.
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 Mobile Responsive eGuide" 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.

  • Telephone 0121 4690009
  • Email

Why not come & Visit Us?

Our offices are located at: Scorchsoft Ltd, 306B, The Big Peg, 120 Vyse Street, Birmingham, B18 6NF

Loading...