How to add wmode = "transparent" for each flash object and ebmed tag?

Question

I have a page that displays dynamic flash content from issuu.com. I need to add wmode="transparent" , because otherwise the navigation menu is displayed under the flash. Is there a short way to do this with jQuery or a simple java script?

I do not want to change the embed code every time a flash is added.

Answer 1

You can use this jQuery code:

 $("object[type='application/x-shockwave-flash']").append('<param name="wMode" value="transparent"/>'); 

Answer 2

ok, after 2 days of searching the internet for an answer, I found a clean JS function that fixes it in all browsers!

there you go:

 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); } } } 

now you can just start when the page loads using jQuery:

  $(document).ready(function () { fix_flash(); // Call Function }); 

Answer 3

I could not get the Mannaz version to work and wanted to get a more concise jQuery function that overwrites the element on the page, so I wrote a new one:

  function fixFlash() { $('object').each(function(){ $(this).find('embed').attr('wmode','transparent'); if($(this).find('param[name=wmode]').attr('value') != 'transparent') { $(this).prepend('<param name="wmode" value="transparent" />'); } temp_var = $(this).parent().html(); $(this).parent().html(temp_var); }); } // Put function execute into onload area fixFlash(); 

Answer 4

From another post here in stackoverflow using jQuery, this works

 $("embed").attr("wmode", "opaque").wrap('<div>'); I use this when using a FCKeditor youtube plugin, as the plugin doesn't wrap the embed node with a object node. $('embed').each(function(){ if($(this).parent()[0]['tagName'] !='OBJECT'){ $(this).attr("wmode", "opaque").wrap('<div>'); } }); 

Answer 5

The last time I checked, changing wmode to JS didn't work. Once a Flash object has been created, changing its wmode value has no real effect.

You will need to do this from the backend or, if this is not possible, in JS BUT before writing the object.

NTN

Answer 6

This is the simplest and most browser compatible solution I could find to remove wMode = "window" objects AFTER the page has already been rendered.

In Internet Explorer, the child nodes of an object cannot be modified after they have been inserted into the DOM. A better solution is to reinsert / redraw it by changing outerHTML.

In most other browsers, changing the attributes of an object / insert is possible, but has no effect after rendering it. Here, re-setting the element in the same position causes re-rendering ... wrap (). unwrap () is the easiest way to do this that comes to my mind in jQuery.

 $("embed[wmode=window], embed:not([wmode])").attr("wmode", "opaque").wrap("<div/>").unwrap(); $("object:has(param[name=wmode][value=window]), object:not(:has(> param[name=wmode]))").each(object); function object() { this.outerHTML = this.outerHTML.replace(/<(?:[^">]+|(["']).*?\1)*>/, '$&<param name="wmode" value="opaque"/>'); }