Youtube and Vimeo Video Embed z-index FIX

By February 27, 2013 development No Comments

Have you ever had an issue where a YouTube or Vimeo video embed disrupts site z-indexes? Well I have, googled it, and found this tip from stackoverflow. It works perfectly, but there was one issue, my client is not web savvy. So I had to automate the process to make both of our lives easier.

What will you need to make this work? Jquery linked and a javascript file for this code, or you can embed it into your markup.

  1. We need to identify all video iframes. In this case the only iframes that were present were video embeds. With the code below, we are just targeting all iframes.

    $("iframe").each(function(){ //Do Something });
      $(this).attr('src',ifr_source+wmode);
  2. Detect source references. For each iframe, we are storing their ‘src’ reference into a variable.
      var ifr_source = $(this).attr('src');
  3. Create a variable for the new text string. This variable will be added to the end of the src reference.
      var wmode = "?wmode=transparent";
  4. Append the variables into iframe source. All together this is what the javascript should look like.
$("iframe").each(function(){
  var ifr_source = $(this).attr('src');
  var wmode = "?wmode=transparent";
  $(this).attr('src',ifr_source+wmode);
});

Hopefully, this tip is a time saver for you.

Thong is a Web Developer at DO.  He once tried to bribe the office to buy him a Power Rangers Morpher

Leave a Reply

Your email address will not be published.

Like what you see? Contact us for a quote. Get Quote