Change WMode with jQuery

If you don't set the wmode on a flash embed it will float over the top of an overlay which can be a pretty big deal. This is ideal in environment with lots of legacy video code or where users will be posting new code and teaching them about wmode is a lost cause. This should work in all browsers.

$("embed").attr("wmode", "opaque");
var embedTag;
$("embed").each(function(i) {
       embedTag = $(this).attr("outerHTML");
       if ((embedTag != null) && (embedTag.length > 0)) {
               embedTag = embedTag.replace(/embed /gi, "embed wmode="opaque" ");
               $(this).attr("outerHTML", embedTag);
       } else {
               $(this).wrap("<div></div>");
       }
});

Comments

  1. User Avatar
    DrCord
    Permalink to comment#

    This is such a useful snippet. Thanks! CSS-Tricks rocks!

  2. User Avatar
    Theo
    Permalink to comment#

    thanks =D

  3. User Avatar
    Nick
    Permalink to comment#

    awesome!

    one note: escape backslashes or alternating quotes are needed on this line:

    embedTag = embedTag.replace(/embed /gi, “embed wmode=”opaque” “);

    thanks!

  4. User Avatar
    Jay
    Permalink to comment#

    Can’t get this to work in Chrome anyone have any ideas? seems to work perfectly in safari and firefox.

  5. User Avatar
    Pur
    Permalink to comment#

    Thank you! You spent me a lot of time.

  6. User Avatar
    chandr123
    Permalink to comment#

    Good solution Chris. But I am getting issue is some time google ad don’t specify transparent or opaque parameter in their flash ad embedded inside iframes. so i could nt bring any overlay over that ad. help.

    ref – http://coding.scribd.com/2010/11/13/flashheed-fixing-the-flash-z-index-problem-for-ads/

  7. User Avatar
    TonHoekstra

    Unfortunately not working for flash elements that are embedded inside iframes, anyone has an solution for that?

    Thanks in advance.

  8. User Avatar
    Finn Moses
    Permalink to comment#

    Thanks for the nice trick with css !

  9. User Avatar
    Sugasini
    Permalink to comment#

    Hi,

    wmmode =”transparent” is working good for flash animation. Like that i want for jquery .. plz give me a solution…

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag