Nav going under youtube video on Internet Explorer

By August 16, 2013 Coding

I used to have an issue with flash objects that were right under the nav appearing on top of the items when there was a dropdown. I learned a while ago that this was a pretty easy fix. Just had to change the wmode value from opaque to transparent or just add that attribute to the object.

But recently i had an issue with an youtube video on a wordpress site. An easy fix too… Just add the same wmode=transparent at the end of the iframe and that’s fixed!

But you can’t expect your client to learn this trick and remember to add this to every video embedded. So i found this link with an easier fix.

Just add this to your scripts file and the magic is done.

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
        //$(this).attr("src",url+"&wmode=transparent");
    });
});

ps: When the video is embedded with ‘?rel=0’ to disable the related videos that show up at the end of your video clip the ?wmode=transparent will not work. In that case you need to use &wmode=transparent and make sure it goes after ‘?rel=0’. i found this on this thread and maimooninc gave the tip.

Leave a Reply