Correct YouTube zindex issue with layers

 In Youtube

There is a nasty bug relating to youtube flash player embed code and problems with lightbox layers which require a high z-index value (Youtube video appears on top of everything). This is common in most IE-8-11 browsers from my testing, and some older versions of Chrome as well.

For older Flash developers you will remember the attribute wmode=”transparent” or wmode=”opaque” which was used to fix the same issue with Flash swf files.

The new YouTube embed however, uses IFRAME so there are 2 options.



Add in this jquery script which will adjust iframes to use wmode variable.

<script type="text/javascript">
$(document).ready(function() {
      var ifr_source = $(this).attr('src');
      var wmode = "wmode=transparent";
      if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
      else $(this).attr('src',ifr_source+'?'+wmode);

In your YouTube source embed add query ?wmode=transparent or ?wmode=opaque to the youtube src url
Recent Posts