Rockstar Web Developer

Adding wmode transparent to WordPress 3 media embeds

Published on November 22, 2010 by , 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:

FavoriteLoadingAdd to favorites

46 Comments

mehigh

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.

Reply
ConnyLo

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.

Reply
mehigh

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.

Reply
mehigh

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!

Reply
Theo

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

Reply
Luke

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

Reply
mehigh

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.

Reply
patrick91

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 πŸ™‚

Reply
Eric

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 )

Reply
mehigh

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

Reply
David C

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.

Reply
mehigh

I’m using the updated function (the 2nd one in the post, which works for iFrames as well) and it works perfectly fine on WordPress 3.3.1.
Check the placement of the function in your functions.php and make sure it doesn’t interfere with any other functions in there.

Reply
rus

I’m not really sure how to check for collisions..

I’ve pasted it right after the <?php

I do find it a bit weird adding the:
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);
inside the functions import. :S

Reply
rus

Yeah, empty line and everything, still not working. :S


Server error:

The website encountered an error. It may be down for maintenance or configured incorrectly.

HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfil the request.

RavanH

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?

Reply
Ben Gruber

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!

Reply
mehigh

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.

Reply
SEO Providers

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

Reply
Mike

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

Reply
mehigh

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).

Reply
Ali Horuztepe

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

Reply
nico

Thank you for the tip!

For users of BuddyPress just replace :
embed_oembed_html
by
bp_embed_oembed_html

πŸ™‚

Reply
mehigh

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 ?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent writings