BLOG/Technology
Youtube and Vimeo Video Embed z-index FIX
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.
- 
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); - Detect source references. For each iframe, we are storing their 'src' reference into a variable.
var ifr_source = $(this).attr('src'); - Create a variable for the new text string. This variable will be added to the end of the src reference.
var wmode = "?wmode=transparent";
 - 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  More from the
DO Blog
 Designing & Building Product Finder Quizzes for eCommer...
Strategy & Planning / December 23, 2020
View Blog Post
 3 Customer Motivation Strategies to Improve Your eCommerce i...
Strategy & Planning / July 27, 2020
View Blog Post