How do I programmatically set all <object>'s to have the wmode set to opaque?

Question

I have a client who is embedding videos into his WordPress blog. The problem is they have a large CSS dropdown that sneaks behind the flash video. I understand that setting the video's wmode to opaque will fix this, but I obviously need this to apply to every video they upload and not have to go to the HTML to add this tag

Is there any way I can do this programatically?

Answer 1

Using jQuery, you could try this:

$(document).ready(function(){
    $("object").append('<param name="wmode" value="opaque">');
});

Not entirely sure if that would work, but it's worth a shot. Good luck!

Answer 2

Since you seem to have abandoned this question I'll paste the answer here:

// makeObjectsOpaque() adds a <param> tag to each <object> tag
// analogous to <object ...><param name="wmode" value="opaque"></object>
// it seems unlikely that adding a <param> to an <object> dynamically after
// it has been rendered by the browser will actually apply the <param> value
// correctly; in other words, it *probably* WILL NOT WORK
function makeObjectsOpaque() {
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for(var i = 0; i < objects.length; i++) {
        elementToAppend = elementToAppend.cloneNode(true);
        objects[i].appendChild(elementToAppend);
    }
}

// makeObjectsOpaque2() adds a 'wmode' attribute to each <object> tag
// this should be analogous to <object ... wmode="opaque"> in HTML
// THIS DOES NOT APPEAR TO BE WHAT YOU WANT TO DO ACCORDING TO
// THIS URL: http://kb2.adobe.com/cps/127/tn_12701.html
function makeObjectsOpaque2() {
    var objects = document.getElementsByTagName('object');
    for(var i = 0; i < objects.length; i++) {
        objects[i].setAttribute('wmode', 'opaque');
        // you can also try:
        // objects[i].wmode = 'opaque';
    }
}

// makeObjectsOpaque3() replaces every <object> tag on the page with
// a cloned copy, adding a <param> tag before replacing it
// analogous to replacing <object ...>...</object>
// with <object ...>...<param name="wmode" value="opaque"></object>
// this *may* cause the browser to re-render the <object> and apply
// the newly added <param>, or it may not
function makeObjectsOpaque3() {
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for(var i = 0; i < objects.length; i++) {
        var newObject = objects[i].cloneNode(true);
        elementToAppend = elementToAppend.cloneNode(true);
        newObject.appendChild(elementToAppend);
        objects[i].parentNode.replaceChild(newObject, objects[i]);
    }
}

window.onload = makeObjectsOpaque3;

If there is already an onload event handler you'll have to do something like:

if(window.onload) {
    var onLoad = window.onload;
    window.onload = function() {
        onLoad();
        makeObjectsOpaque3();
    };
} else {
    window.onload = makeObjectsOpaque3;
}

Answer 3

How about this. It sets it on the object and as a param (if the param already exists, it updates it; otherwise, it adds it).

var setWmode = function(wmode, object) {
    $(object || "object").each(function(i, node) {
     // Set wmode on the object
     node.setAttribute("wmode", wmode);

     // See if wmode already exists to avoid duplication param conflicts
     var currentWmode = $("param[name='wmode']", node);

     // If it already exists, make sure its the new wmode
     if ( currentWmode.length ) {
      currentWmode.attr("value", wmode);
     }
     // Otherwise, add it
     else {
      $(node).append('<param name="wmode" value="' + wmode + '">');
     }
    });
};

$(document).ready(function() {
    setWmode("opaque");
});

Answer 4

To avoid confusion with all the edits I've done to my previous answer, I'm creating a new answer with a fully tested and working sample page. It has been tested and is working in IE 6, 7 & 8, Opera 9.6 & 10, Safari 3 & 4, Google Chrome, but no version of Firefox I tested (2, 3 or 3.5):

<html>
<head><title>Opacity text</title></head>
<body>
<div style="color:Red;position:absolute;top:0px;left:0px;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
</div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="200" width="300">
    <param name="movie" value="http://freevideocoding.com/flvplayer.swf?file=http://www.freevideoediting.com/TVQvideos/Queen Demo--flv.flv&autoStart=false">
    <param name="bgcolor" value="#ffff00">
</object>
<!--
all you need to make this work is the script listed below.
everything else is just sample code to provide a demonstration
that the script shown below actually works
-->
<script type="text/javascript">
function makeObjectsOpaque_TestedAndWorking() {
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for (var i = 0; i < objects.length; i++) {
        var newObject = objects[i].cloneNode(true);
        elementToAppend = elementToAppend.cloneNode(true);
        newObject.appendChild(elementToAppend);
        objects[i].parentNode.replaceChild(newObject, objects[i]);
    }
}
window.onload = makeObjectsOpaque_TestedAndWorking;
</script>
</body>
</html>

Answer 5

makeObjectsOpaque_TestedAndWorking from Grant works fine - at first - but here is what I experience: It works when I first load the page, but if I refresh the page or go to a new page and press Back, my Flash object loads on top of all other layers again. It makes no sense, but do you know a workaround? Do you experience this also?

Answer 6

For the record, it needs to be changed in TWO places: see here.

Answer 7

I think the problem is that you need to create a wmode="opaque" attribute inside of the embed tag AS WELL AS add a param element with wmode set to "opaque." While Grant Wagner's code is effective at adding the wmode="opaque" as a param inside the object, it does not add it as an attribute in the embed tag. You need them both if you want this to work cross-browser, cross-platform. That might be why Grant Wagner is seeing it work, while patricksweeney is not.

Josh Fraser wrote a nice function that rewrites the embed tag to include the wmode attribute. soooooo I combined Grant Wagner's solution for adding the wmode param, and Josh Fraser's solution for adding a wmode attribute to the embed in one function, and it looks a little something like this:

 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='opaque'");
            // add a new wmode parameter
            else 
                new_embed = html.replace(/<embed\s/i,"<embed wmode='opaque' ");
            // 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','opaque');
            embed.parentNode.replaceChild(new_embed,embed);
        }
    }
    // loop through every object tag on the site
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for (var i = 0; i < objects.length; i++) {
        var newObject = objects[i].cloneNode(true);
        elementToAppend = elementToAppend.cloneNode(true);
        newObject.appendChild(elementToAppend);
        objects[i].parentNode.replaceChild(newObject, objects[i]);
    }
}
window.onload = fix_flash;

It's a little bit of code, but it works very well, and it saved me from hours of pulling out my hair.