Problem: Flash or embeds are “popping through” your carefully designed transparent stuff.

You have lots of posts loading in through the tumblr api, some of which have random embeds from soundcloud, youtube, vimeo, etc. none of these have their wmode set. You say to yourself “no problem, i’ll add it with jquery”. And you do. And it works. Except in IE6/7/8/9.

Doh. Or – “How do i fix this madness?”

The issue here is that IE doesnt care if you change “object” tags. after they have been rendered by the browser. jQuery be damned!

My (hard-won) solution is to remove the original object tag and replace it with a clone. I hide the container div prior to loading in the JSON and changing the wmode on all embeds, then display everything at once.

$("#the-posts").hide();

// grab ALL object tags, clone them, then remove the original and add the cloned element.

$("#the-posts object").each(function(idx,item){
  if($(item).attr('id') == 'html5'){
    // nope
  } else {
    var the_parent = $(item).parent();
    var the_new_object = $($(item).clone()).remove().html();
    the_parent.remove($(item));
    $(item).remove();
    the_parent.append(the_new_object);
  }
});

// set the wmode on the container objects and embed tags for Safari/Firefox/Chrome.

$("#the-posts embed").attr("wmode",'opaque');
$("#the-posts object").attr("wmode",'opaque'); 

// set the wmode on the params tags.

$("#the-posts param[name=wmode]").attr('value', 'opaque');

// append wmode for youtube/vimeo iframe embeds, making sure to either use an ? or & depending on existing query string.  And leave the facebook connect frame alone.

$("#the-posts iframe").each(function(idx,item){ 
  if($(item).attr('id') == 'fdbk_iframe'){
    // leave it alone
  } else {
    if($(item).attr('src') && $(item).attr('src').match(/\?/i)){
      $(item).attr('src', $(item).attr('src')+"&wmode=opaque");
    } else {
      $(item).attr('src', $(item).attr('src')+"?wmode=opaque");
    }
  }
});
$("#the-posts").show();