Embedded videos overlapping CSS drop-down menu

Recently I bumped into a known issue with youtube embed codes versus the CSS drop-down menu right above.

The Issue:
The video embed code always displays on top of the CSS drop-down menu so you can’t click the sub-menu links or view any content that happens to pop “under” it.

The Solution:
If you happen to come across iframe embed codes, simply add the following to the code like so:

<iframe width="560" height="315" src="http://www.youtube.com/embed/OI3shBXlqsw?wmode=transparent&amp;list=PLF4E953524FF92B5C" frameborder="0" allowfullscreen="" wmode="Opaque"></iframe>

Thus adding the following attributes to the iframe and inner link “?wmode=transparent” + “wmode=opaque” .
The first bit can also be “&wmode=transparent” if you have to add this at the end of an already existing attribute of the embed code.

Are you a wordpress user? Then you might want to consider to add the following code to your functions.php file. Now you don’t have to go through all your posts, containing youtube embeds.


//Embed Video Fix

function add_video_wmode_transparent($html) {
   if (strpos($html, "<iframe" ) !== false) {
    	$search = array('" frameborder="0"', '?hd=1?hd=1');
		$replace = array('?hd=1&wmode=transparent" frameborder="0"', '?hd=1');
		$html = str_replace($search, $replace, $html);
   		return $html;
   } else {
        return $html;
   }
}

// Add Filter

add_filter('the_content', 'add_video_wmode_transparent', 10); // Css menu will now overlap the iframe embeds close to the top of the website/blog

If you happen to bump into the “older” embed code (object), simply add the following to the embed synthax like so:


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="525" height="340" title="MyFlash">
  <param name="movie" value="myFlashMovie.swf">
  <param name="quality" value="high">
  
  <param name="wmode" value="opaque"> // This makes the "wmode" "opaque"
  
  <embed src="myFlashMovie.swf" wmode="opaque" width="525" height="340" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object> 

Again, if you want a quick fix using some sort of script for the old embed codes whilst using wordpress, you can add the following to your functions.php file:

function embed_fix_script()
	{
	  if (!is_admin()) {
	    wp_deregister_script('jquery'); // Deregister WordPress jQuery
            wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array(), '1.8.3'); // Load Google CDN jQuery //more control over the jQuery version you use
            wp_enqueue_script('jquery'); // Enqueue it!
		
	    wp_register_script('embedfix', get_template_directory_uri() . '/js/embed.wmode.js', array('jquery')); // Embed the jQuery file after having loaded the Google jQuery version
	    wp_enqueue_script('embedfix'); // Enqueue embed fix jQuery file 
	}
}

// Add Actions
add_action('wp_enqueue_scripts','embed_fix_script'); // Add embed fix script

The jQuery file you need to also need to add to your themes “/js” folder in this case, is the following:
(Source of the script I kind of stole can be found here: http://www.nobilesoft.com/Scripts/fix_wmode2transparent_swf.js)


/*
Wrote by jose.nobile@gmail.com
Free to use for any purpose
Tested at IE 7, IE 8, FF 3.5.5, Chrome 3, Safari 4, Opera 10
Tested with Object[classid and codebase] < embed >, object[classid and codebase], embed, object < embed > -> Vimeo/Youtube Videos
Please, reporte me any error / issue
*/
function LJQ() {
		var sc=document.createElement('script');
		sc.type='text/javascript';
		sc.src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
		sc.id = 'script1';
		sc.defer = 'defer';
		document.getElementsByTagName('head')[0].appendChild(sc);
		window.noConflict = true;
		window.fix_wmode2transparent_swf();
}
if(typeof (jQuery) == "undefined") {
	if (window.addEventListener) {
	  window.addEventListener('load', LJQ, false); 
	 } else if (window.attachEvent) { 
	  window.attachEvent('onload', LJQ);
	 }
}
else { // JQuery is already included
	window.noConflict = false;
	window.setTimeout('window.fix_wmode2transparent_swf()', 200);
}
window.fix_wmode2transparent_swf = function  () {
	if(typeof (jQuery) == "undefined") {
		window.setTimeout('window.fix_wmode2transparent_swf()', 200);
		return;
	}
	if(window.noConflict)jQuery.noConflict();
	// For embed
	jQuery("embed").each(function(i) {
		var elClone = this.cloneNode(true);
		elClone.setAttribute("WMode", "Transparent");
		jQuery(this).before(elClone);
		jQuery(this).remove();
	});	
	// For object and/or embed into objects
	jQuery("object").each(function (i, v) {
	var elEmbed = jQuery(this).children("embed");
	if(typeof (elEmbed.get(0)) != "undefined") {
		if(typeof (elEmbed.get(0).outerHTML) != "undefined") {
			elEmbed.attr("wmode", "transparent");
			jQuery(this.outerHTML).insertAfter(this);
			jQuery(this).remove();
		}
		return true;
	}
	var algo = this.attributes;
	var str_tag = '<OBJECT ';
	for (var i=0; i < algo.length; i++) str_tag += algo[i].name + '="' + algo[i].value + '" ';	
	str_tag += '>';
	var flag = false;
	jQuery(this).children().each(function (elem) {
		if(this.nodeName == "PARAM") {
			if (this.name == "wmode") {
				flag=true;
				str_tag += '<PARAM NAME="' + this.name + '" VALUE="transparent">';		
			}
			else  str_tag += '<PARAM NAME="' + this.name + '" VALUE="' + this.value + '">';
		}
	});
	if(!flag)
		str_tag += '<PARAM NAME="wmode" VALUE="transparent">';		
	str_tag += '</OBJECT>';
	jQuery(str_tag).insertAfter(this);
	jQuery(this).remove();	
	});
}

If you ever come across silverlight embeds, you can add some parameters after the following code:

<object id="silverlight" data="data:application/x-silverlight," type="application/x-silverlight-2-b1" width="100%" height="100%" >
<param name="source" value="ClientBin/YourSilverlight.xap"/>

Add:

<param name="windowless" value="true" /> // Oftentimes this fixes the problem
<param name="background" value="transparent" /> // Sometimes this also needs to be added
</object> 

Obviously, this is all nice and fun but… If you feel comfortable in sql and can inject a good sql commando to sort through all your posts and pages and replace that code by the updated version, you have it all hardcoded and ready to go without the use of one of these scripts.

Sources and further reading that helped me on my way with the particular projects I was working on:

Previous Post | Next Post

  • April

    First – you are awesome. I was able to get the fix to work, unfortunately, I ran into a brand new problem. My comments, and the beginning of the code are now showing both on the website, as well as the dashboard on my site. Ahhh! Hoping I will be able to figure out how to fix that next so that it will all show correctly 🙂 Thanks for posting!

    (very hard to read the content on this page with the dark font on dark background…. but your code help is awesome)

    • Black Book Operations

      Hi there,

      This probably is the most late comment you have ever witnessed but here it is anyway 😉

      Thanks for the comment and glad this code helped out a bit (though probably by now obsolete and the project you were using it for might have already changed a lot).

      The dark font on the dark background was related to the disquss plugin I presume? (It had some issues with the settings making it think it was a light-backgrond website which in turn turned everything into a dark font) nonetheless, readability is always a plus.

      Good luck with any future work!

      Kind regards.