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&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:
- http://www.developersnippets.com/2010/12/04/how-to-add-wmodetransparent-for-flash-object-using-jquery-and-native-javascript/
- http://stackoverflow.com/questions/11454419/silverlight-video-player-overlapping-web-elements
- http://blogs.msdn.com/b/silverlight_sdk/archive/2008/11/12/limitations-of-windowless-mode-for-silverlight.aspx
‹ Previous Post | Next Post ›