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```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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