Grow your CSS skills. Land your dream job.

Last updated on:

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

Reference URL

Comments

  1. Permalink to comment#

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

  2. Theo
    Permalink to comment#

    thanks =D

  3. 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. Permalink to comment#

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

  5. Permalink to comment#

    Thank you! You spent me a lot of time.

  6. 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. TonHoekstra

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

    Thanks in advance.

  8. Thanks for the nice trick with css !

  9. Sugasini
    Permalink to comment#

    Hi,

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".