Correct YouTube zindex issue with layers

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.

OPTION 1:

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

<script type="text/javascript">
$(document).ready(function() {
   $("iframe").each(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);
   });
});
</script>

OPTION 2:
In your YouTube source embed add query ?wmode=transparent or ?wmode=opaque to the youtube src url

src="www.youtube.com/embed/7WBth8HqWLo?list=PLQcELFkO9eWWHJU3W7l-HI2puuAEeyqt8?wmode=transparent"