Adding wmode transparent to WordPress 3 media embeds

 In Wordpress

In case you have a website that uses dropdowns you probably noticed the dropdown panel might get under the flash media (like Youtube video embeds). The fix to this is to setup the wmode attribue to transparent… but how do we do it in WordPress?

Since WordPress 2.9 has enabled us to easily embed videos ( codex.wordpress.org/Embeds ), it also means we don’t have the ability to change the embed code (to add the wmode transparent for example), and that’s why we have to rely on applying a filter that does that for us.

Simply paste the following at the beginning of your theme’s functions.php (after <?php ), and the wmode attribute will be setup automatically:

function add_video_wmode_transparent($html, $url, $attr) {
   if (strpos($html, "<embed src=" ) !== false) {
    	return str_replace('</param><embed', '</param><param name="wmode" value="transparent"></param><embed wmode="transparent" ', $html);
   } else {
        return $html;
   }
}
add_filter('embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

Update

As Theo pointed out, the videos can come in in iframes instead of object elements. To make the videos transparent in those cases as well, here’s the updated snippet:

function add_video_wmode_transparent($html, $url, $attr) {

if ( strpos( $html, "<embed src=" ) !== false )
   { return str_replace('</param><embed', '</param><param name="wmode" value="opaque"></param><embed wmode="opaque" ', $html); }
elseif ( strpos ( $html, 'feature=oembed' ) !== false )
   { return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html ); }
else
   { return $html; }
}
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

A demo video embedded using built-in oEmbed:

Recent Posts
Showing 46 comments
  • Farhan 'AlfaTrion' Jiwani
    Reply

    Thanks. I tried pasting other functions around the web but yours was the first one to work!

    • mehigh
      Reply

      You’re welcome.

  • BrenFM
    Reply

    Legend! Thanks for this. A permanent bugbear – now resolved.

  • Jake
    Reply

    Nice! Just what I was looking for, thanks!

  • JFK
    Reply

    two thumbs up!!!!
    congrats and thank you …. saved me some headaches ;o)

  • Francesco
    Reply

    Thank You!

    • Francesco
      Reply

      this fix also problems with fancybox on google chrome.

      • mehigh
        Reply

        Yes, any item that can overlay a flash element ‘actually overlays it’ when a wmode is setup on the flash element.
        Glad you found my fix useful.

  • ConnyLo
    Reply

    Hi Mehigh,
    I am very thankful for your function: copied that in and it works like wanted!! I have a fixed header and content to scroll under it. I am proud of it. But only that %&$%-flash movies dont want to scroll under the header.
    Its so great to find your solution! May be I could open a ticket at the WordPress bugtracker…
    Thank you again.

    • mehigh
      Reply

      You don’t need to be submitting a ticket, as the WordPress developers already stated their mind that the wmode will not show up by default in the oEmbeds. They said it’s the theme developer’s choice to overwrite it if needed.
      Indeed, only a few particular type of themes might benefit from this wmode, as most people would not normally have overlaying items (other than a static header / a dropdown).
      Just keep the function handy, you’ll be using it for a while.

  • Lex
    Reply

    Does this still work in 3.2.1? Doesn’t seem to do the job for me. See here: http://seeseemedia.com/video/role-of-mayor-is-not-about-power/ Thanks for looking πŸ™‚

    • mehigh
      Reply

      I’m running the latest version of WordPress and as you can see in the source code of this page’s video, the script is still working.
      I didn’t rely on any wordpress internal other than checking for the default embed mark-up (embed src) and appending the wmode settings.
      Probably the code you added is not running for some reason, maybe you didn’t place it in the right place ? Just do some checking on it, as I can confirm things work properly on the latest version. Good luck!

  • Theo
    Reply

    Thanks for the snippet πŸ™‚
    Just a quick addition to also fix the issue when the output comes in the form of an iframe rather than an object.

    function add_video_wmode_transparent($html, $url, $attr) {

    if ( strpos( $html, “<embed src=" ) !== false )
    return str_replace( '<embed', '<embed wmode="transparent" ', $html );
    elseif ( strpos ( $html, 'feature=oembed' ) !== false )
    return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html );
    else
    return $html;

    }
    add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

    • mehigh
      Reply

      I’ve updated the post with your iframe fixing addition.
      Thanks!

  • Andrew
    Reply

    Worlds of help. Many thanks!

  • Luke
    Reply

    FYI the updated code snippet is missing some brackets that will bring down your entire site if you try to copy/paste it directly. It should look something more like this:

    function add_video_wmode_transparent($html, $url, $attr) {
    if (strpos($html, “<embed src=" ) !== false) {
    return str_replace('<embed', '<embed wmode="transparent" ', $html);
    }
    elseif ( strpos ( $html, 'feature=oembed' ) !== false ) {
    return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html );
    }
    else {
    return $html;
    }
    }
    add_filter('embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

    • mehigh
      Reply

      I’ve added the extra brackets, thanks for your input.
      On my setup, the single commands were working properly even without the brackets, so there might be some PHP version that might stumble into them somehow, and therefore needs the extra brackets for precise guidance.

  • patrick91
    Reply

    I’d change the filter from “embed_oembed_html” to “oembed_result” so that it’ll work also with “wp_oembed_get” πŸ™‚

    PS. Thanks for the post πŸ™‚

  • Eric
    Reply

    Thanks! Huge help. One thing, the following line’s first quote mark is incorrect:

    if ( strpos( $html, β€œ<embed src=" ) !== false )

    Should be:

    if ( strpos( $html, "<embed src=" ) !== false )

    • mehigh
      Reply

      WordPress was a bit over-zeleous and add in his ‘pretty quotes’ on my pasted code. It’s fixed now.

  • David C
    Reply

    Thanks for the function — huge help. I took it and cleaned it up some, though now it’s maybe not as readable. This works well for me:

    function add_wmode_opaque($html, $url, $attr) {
    $html = preg_replace(‘/feature=oembed/’, ‘$0&wmode=opaque’, $html);
    $html = preg_replace(‘/(object|embed).*?height=\”\d+\”/’, ‘$0 wmode=”opaque”‘, $html);
    return $html;
    }
    add_filter(‘oembed_result’, ‘add_wmode_opaque’, 10, 3);

    PS. Thanks also to patrick91 — using oembed_result was really useful for me.

  • rus
    Reply

    its not working for me, :S

    crashes the whole thing for some reason.

    I’m on WP 3.3.1 btw

  • Leo Cavallini
    Reply

    Works like a charm. Congrats and thanks for sharing…

  • RavanH
    Reply

    Since the new Youtube oEmbed produces an iframe embed, I found the preg_replace code as suggested by David C (above) very useful. Thanks πŸ™‚

    Added a quick strpos check (for youtube and missing wmode) before the actual preg_replace because these are relatively slow and not always needed:


    if(!function_exists('add_video_wmode_opaque')) {
    function add_video_wmode_opaque($html, $url, $attr) {
    if (strpos($html, "youtube" ) !== false && strpos($html, "wmode" ) == false) {
    $html = preg_replace('/feature=oembed/', '$0&wmode=opaque', $html);
    $html = preg_replace('/(object|embed).*?height=\"\d+\"/', '$0 wmode="opaque"', $html);
    }
    return $html;
    }
    }
    add_filter('embed_oembed_html', 'add_video_wmode_opaque', 10, 3);

    I’m not even sure the second preg_replace (for object/embed) is necessary any more… Or are there still cases where the iframe embed is not produced?

    • Luca
      Reply

      Thank you guys!
      This works for me!
      you rock!

  • Ben Gruber
    Reply

    Thank you for a great post. This works for me in all browsers except for chrome. For some reason, the transparent parameter has to be the first for it to work in chrome. I can manually make this happen but am looking for a blanket solution like this one. Has anyone run into this issue? Any ideas on it?

    Thanks again!

    • mehigh
      Reply

      What environment are you on ? (Win/Mac/Linux) ?
      I’ve searched and found the following topic:
      http://stackoverflow.com/questions/8606985/new-chrome-update-kills-wmode-transparent

      Seems you’re not the only one complaining about wmode getting stripped on the Chrome browser… and the common solution would be to put in the wmode inside the embed as an attribute as well… which is a thing the script adds in properly already.

      I don’t think the order is what would solve this in the long run (might be just a quirk which would solve it temporarily until a new version comes out). There are a ton of issues around this matter on Chromium issue tracker, so it’s probably due to be solved.

  • Danniel
    Reply

    Thanks! It works!

  • SEO Providers
    Reply

    Thank you so much for the additional functions, I am a wordpress enthusiast and your code ads additional knowledge to get rid off those overlays.

    I have also tried your code and will be implementing it to my own website at Top SEO Providers.

    Now I dont need to mannually add name=”wmode” value=”transparent” every time I want to embed a video..

    Thanks Again,
    Nimitz

  • Brandon
    Reply

    Thanks for this! You rule!

  • Mike
    Reply

    thanks for the snippet.
    how to set size to this code? I’d like my video size is 354wx290h …

    • mehigh
      Reply

      Hey Mike,
      You’d like to check out the Settings -> Media in your WordPress admin.. and fill in the details for Embeds (the maximum embed size).

  • Ali Horuztepe
    Reply

    Doesn’t work when it is shown on the activity stream of Buddypress !!! Any suggestions?

  • Mark Hesketh
    Reply

    Saved me a lot of headaches with this function, thanks a lot!

  • Hannes
    Reply

    After a lot of headaches this function saved my day!
    Thanks!

  • nico
    Reply

    Thank you for the tip!

    For users of BuddyPress just replace :
    embed_oembed_html
    by
    bp_embed_oembed_html

    πŸ™‚

  • Foxinni
    Reply

    Perfect solution. Pretty annoyed that this sort of code is not in the source by default… such a web 1.0 problem. Thanks!

  • Mouhammad
    Reply

    It doesn’t work for me!

    • mehigh
      Reply

      I haven’t specifically tested this on the latest WP versions (3.5.x).
      Can you elaborate more on your comment ? Did the wmode not pass through to the HTML ?

  • Dan
    Reply

    Still works for me. Just popped it into functions.php. Thanks πŸ™‚

pingbacks / trackbacks

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search