Youtube Embed IE11 Dropdown Issues

September 18, 2014

Sometimes fixing iframe and YouTube embed issues can be as simple as adding wmode=transparent to the iframe src string <iframe scr”http://youtube.com/embed/link_to_video” wmode=”transparent”></iframe> Other times, you may need to change this to wmode=”Opaque” If you’re still experiencing issues with drop down menus appearing behind iframes, and z-index is being ignored, the following code will come in handy.  This uses a no-conflict method of applying wmode to the embed. Sourced here.

var $j = jQuery.noConflict();  
jQuery(document).ready(function($j){   
	$j('iframe').each(function() {     
		var url = $j(this).attr("src");       
		if ($j(this).attr("src").indexOf("?") > 0) {         
			$j(this).attr({           
				"src" : url + "&wmode=transparent",           
				"wmode" : "Opaque"         
			});       
		} else {         
			$j(this).attr({           
				"src" : url + "?wmode=transparent",            
				"wmode" : "Opaque"         
			});       
		}    
	}); 
});