• Feed RSS

How to: Add wmode=”transparent” for flash object using jQuery and Native JavaScript

How to: Add wmode=”transparent” for flash object using jQuery and Native JavaScript: "
Last week, I had a problem with flash object which is rendering dynamically on to my web pages. Actual scenario to explain about this issue is that – when I am trying to get some videos on my page the basic flash object tag is rendering automatically which has not got wmode=”transparent” set by default, with that other div containers are not showing up properly. Like for example the menu layer is going beyond the flash player that is video player which looks weird for the users who are viewing the page.



I tried couple of hours by appending respective param tag [<param name="wMode" value="transparent"/>] to the object tag using jQuery. Appending of param tag is fine but there is no change in the behavior of that object tag – since I am trying to append the tag without doing any cloning method. I mean, once after appending the param tag to the object the respective object tag should be refreshed to make that flash object tag to work. The option which I am trying was not working properly.

Either we can try with two scenario’s here:

1. While retrieving the flash object tag, with jQuery check whether you have <param name=”wMode” value=”transparent”/> with the Object tag – if you could not find the same, then append the respective param tag and then put it on to your page.

2. The second scenario would be, after rendering the Object tag check for the param tag – if you could not find append the same and try to clone it and refresh the object tag accordingly using jQuery.

After searching for hours I could find two references from two different websites. One came up with native JavaScript function code and the other with jQuery code.

jQuery Code:


Key feature about this is that, just include the script in any webpage, it will change/add the wmode to transparent to embed or Object tags accordingly. Content Courtesy: Jose, you can download the js from nobilesoft.com – http://www.nobilesoft.com/Scripts/fix_wmode2transparent_swf.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

/*
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(); 
});
}


Native JavaScript Code:



Website: http://www.onlineaspect.com/2009/08/13/javascript_to_fix_wmode_parameters/

HTML Sample


1
2
3
4
5

<object width="200" height="300" data="example.swf" type="application/x-shockwave-flash">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="src" value="example.swf" />
</object>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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++) {
if(children[j].getAttribute('name').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')+"' />");
}
}
// replace the old embed object with the fixed versiony
object.insertAdjacentHTML('beforeBegin',new_object);
object.parentNode.removeChild(object);
}
}
}



1
2
3

$(document).ready(function () {
fix_flash();   
}


This article might help most of the developers who has faced or trying to fix the problem of wmode=”transparent”.
"
Posted in: ,,