Fix Menus Falling Behind YouTube Videos with jQuery

Fix Menus Falling Behind YouTube Videos with jQuery

Posted by Rainey

Have you ever built a site where embedded videos, like YouTube, are a part of the content jut to discover that your drop down menu is playing hide and seek behind it? Well, the reason for this is because these videos lack the attribute – wmode=transparent.  No problem, simply educate your users on how to edit the embed code to include this, right? Or, you can add this jQuery snippet to your site to automatically include it. Sold.

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

That’s it. Carry on and build great things!

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - jQuery, Snippets, Tutorials