How to use wmode as transparent for flash and what’s its use?
Sometime our embedded flash object comes over our websites dropdown menus or over other objects like light box, jQuery Boxy, fancybox etc.
We can solve this problem by changing the wmode of embed to transparent. By changing the wmode to transparent the flash object becomes transparent.
We can do it in following ways.
HTML:-
Add the following parameter to the OBJECT tag:
Add the following parameter to the EMBED tag:
wmode=”transparent”
JavaScript:-
If you are using swfobject.js javascript file for embedding. Then do it like this.
var obj = new SWFObject(”player.swf”,”ply”,”300″,”250″,”9″,”#FFFFFF”);
obj.addParam(”wmode”,”transparent”);
If you want to apply the wmode transparent to whole HTML page. You can do this way.
for (var ems = document.embeds, i = 0, em; em = ems[i]; i++) {
em.setAttribute(’wmode’, ‘transparent’);
var nx = em.nextSibling, pn = em.parentNode;
pn.removeChild(em);
pn.insertBefore(em, nx);
}
=========== OR ==============
<script>
function fix_flash() {
// loop through every embed tag on the site
var embeds = document.getElementsByTagName(’embed’);
for (i = 0; i < embeds.length; i++) {
embed = embeds[i];
var new_embed;
// everything but Firefox & Konqueror
if (embed.outerHTML) {
var html = embed.outerHTML;
// replace an existing wmode parameter
if (html.match(/wmode\s*=\s*(‘|”)[a-zA-Z]+(‘|”)/i))
new_embed = html.replace(/wmode\s*=\s*(‘|”)window(‘|”)/i, “wmode=’transparent'”);
// add a new wmode parameter
else
new_embed = html.replace(/<embed\s/i, “<embed wmode=’transparent’ “);
// replace the old embed object with the fixed version
embed.insertAdjacentHTML(‘beforeBegin’, new_embed);
embed.parentNode.removeChild(embed);
} else {
// cloneNode is buggy in some versions of Safari & Opera, but works fine in FF
new_embed = embed.cloneNode(true);
if (!new_embed.getAttribute(‘wmode’) || new_embed.getAttribute(‘wmode’).toLowerCase() == ‘window’)
new_embed.setAttribute(‘wmode’, ‘transparent’);
embed.parentNode.replaceChild(new_embed, embed);
}
}
// loop through every object tag on the site
var objects = document.getElementsByTagName(‘object’);
for (i = 0; i < objects.length; i++) {
object = objects[i];
var new_object;
// object is an IE specific tag so we can use outerHTML here
if (object.outerHTML) {
var html = object.outerHTML;
// replace an existing wmode parameter
if (html.match(/<param\s+name\s*=\s*(‘|”)wmode(‘|”)\s+value\s*=\s*(‘|”)[a-zA-Z]+(‘|”)\s*\/?\>/i))
new_object = html.replace(/<param\s+name\s*=\s*(‘|”)wmode(‘|”)\s+value\s*=\s*(‘|”)window(‘|”)\s*\/?\>/i, “<param name=’wmode’ value=’transparent’ />”);
// add a new wmode parameter
else
new_object = html.replace(/<\/object\>/i, “<param name=’wmode’ value=’transparent’ />\n</object>”);
// loop through each of the param tags
var children = object.childNodes;
for (j = 0; j < children.length; j++) {
try {
if (children[j] != null) {
var theName = children[j].getAttribute(‘name’);
if (theName != null && theName.match(/flashvars/i)) {
new_object = new_object.replace(/<param\s+name\s*=\s*(‘|”)flashvars(‘|”)\s+value\s*=\s*(‘|”)[^'”]*(‘|”)\s*\/?\>/i, “<param name=’flashvars’ value='” + children[j].getAttribute(‘value’) + “‘ />”);
}
}
}
catch (err) {
}
}
// replace the old embed object with the fixed versiony
object.insertAdjacentHTML(‘beforeBegin’, new_object);
object.parentNode.removeChild(object);
}
}
}
//Write following function in your javascript tag and call this function when your document is fully loaded.
//Method to identified that the body is fully loaded:
var body = document.getElementsByTagName(“BODY”)[0];
if (body && body.readyState == “loaded”) {
AfterLoad();
} else {
if (window.addEventListener) {
window.addEventListener(“load”, AfterLoad, false);
} else {
window.attachEvent(“onload”, AfterLoad);
}
}
function AfterLoad() {
fix_flash(); // call that function to add wmode=”transparent” for every flash object
}
</script>
Enjoy Javascript!!!