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  | Comments (16)

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



Comments (16)

Gil:
Apr 17, 2013 at 04:50 PM

Thank you that worked perfectly.....

giannis:
Apr 23, 2013 at 10:10 PM

thanx mate!
really worked out with the jquery code!

:
Apr 30, 2013 at 08:47 PM

Thanks, the JQueyr really worked out.

:
May 02, 2013 at 04:24 PM

Excelent!!
My small contribution. Just add this:

$(window).load(function(){
$('iframe').each(function(){
var url = $(this).attr("src"), char = url.indexOf("?") != -1 ? '&' : '?';
/* In my case it is only necessary to youtube player */
if(url.indexOf("youtube") != -1){
$(this).attr("src",url+char+"wmode=transparent");
$(this).attr("wmode","Opaque");
}

});

Regards

:
May 03, 2013 at 09:46 AM

Thank you, really saved my time :)

Dmitry:
Jun 12, 2013 at 10:54 PM

Great fix, thanks. Recently added a fixed header to the site and the iframe has been getting in the way.

:
Jul 02, 2013 at 06:54 AM

Thanks a lot. Really helpful :)

Lorraine:
Jul 11, 2013 at 02:11 PM

Great fix, worked perfectly.

rome total war ii:
Jul 20, 2013 at 01:23 AM

Wow, that's what I was exploring for, what a stuff! present here at this weblog, thanks admin of this web site.

:
Jul 24, 2013 at 02:35 PM

Really thanks man... It helped a lot! =D

:
Jul 25, 2013 at 09:17 AM

Man, this saved my day. Great Great Great jquery solution worked perfectly

:
Aug 28, 2013 at 02:11 PM

this saved me A LOT of time and frustration, thanks dude

:
Sep 18, 2013 at 09:24 AM

Thx!!!! Worked perfectly!!!

:
Oct 03, 2013 at 04:22 PM

Thank you very much! Z-index with youtube iframe was driving me crazy.

how to find imei number:
Oct 05, 2013 at 06:14 PM

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

Hajo Keffer:
Nov 01, 2013 at 12:50 PM

Brilliant! I used the html solution. YMMD


Add a Comment





Allowed tags: <b><i><br>Add a new comment:



Contact Details

  • Phone 07909115004
  • Email
  • Address 111 Hagley Road,
    Edgbaston,
    Birmingham,
    B16 8LB, UK

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