Internet Explorer has an issue? No way!

Joking aside…Today I encountered an issue with YouTube iframes showing above a top-aligned, fixed navigation bar, which became obvious as you scrolled down the page and the video showed on top.

This is not difficult to fix. You can modify the embed code pretty painlessly to get it to show properly by appending the iframe href with ?wmode=opaque OR ?wmode=transparent

But what if you have a lot of videos throughout your entire website and you don’t want to edit them all to fix the problem?

That’s where the following jQuery script comes in!

$(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);
   });
});

Problem solved!

Apparently, this issue exists with versions of Chrome too, but I am unable to replicate it on Chrome 29.0.1547.66

Incoming search terms:

• HowtoFix:InternetExplorerYouTubeVideoShowingAboveFixedElement/IgnoringZ-Index|AGeekandHisBlog