Youtube and Vimeo Video Embed z-index FIX

February 27th, 2013 by Thong Comments (0)

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 });
  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.
  var ifr_source = $(this).attr('src');
  var wmode = "?wmode=transparent";

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

Post a Comment