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 {

Reference URL


  1. DrCord
    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#


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

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


  4. 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. Pur
    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 –

  7. TonHoekstra

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

    Thanks in advance.

  8. Finn Moses
    Permalink to comment#

    Thanks for the nice trick with css !

  9. Sugasini
    Permalink to comment#


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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.