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:
Thanks. I tried pasting other functions around the web but yours was the first one to work!
You’re welcome.
Legend! Thanks for this. A permanent bugbear – now resolved.
Nice! Just what I was looking for, thanks!
two thumbs up!!!!
congrats and thank you …. saved me some headaches ;o)
Thank You!
this fix also problems with fancybox on google chrome.
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.
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.
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.
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
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!
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);
I’ve updated the post with your iframe fixing addition.
Thanks!
Worlds of help. Many thanks!
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);
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.
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
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 )
WordPress was a bit over-zeleous and add in his ‘pretty quotes’ on my pasted code. It’s fixed now.
PyMEL | Mind's A.I.
Add “wmode” to youtube clips embeded with oEmbed in Wordpress | Developer In A Bad Mood
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.
its not working for me, :S
crashes the whole thing for some reason.
I’m on WP 3.3.1 btw
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.
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
You’ve placed an empty line after the < ?php correct ?
Also, you need to place both the function, and the add_filter as well. Filters are a common way to modify generated mark-up inside WordPress, so there's nothing odd in placing a filter in there.
More can be read about this process here:
http://codex.wordpress.org/Function_Reference/add_filter
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.
“
Works like a charm. Congrats and thanks for sharing…
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?
Thank you guys!
This works for me!
you rock!
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!
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.
Thanks! It works!
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
Thanks for this! You rule!
thanks for the snippet.
how to set size to this code? I’d like my video size is 354wx290h …
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).
Doesn’t work when it is shown on the activity stream of Buddypress !!! Any suggestions?
Saved me a lot of headaches with this function, thanks a lot!
After a lot of headaches this function saved my day!
Thanks!
Thank you for the tip!
For users of BuddyPress just replace :
embed_oembed_htmlby
bp_embed_oembed_htmlPerfect solution. Pretty annoyed that this sort of code is not in the source by default… such a web 1.0 problem. Thanks!
It doesn’t work for me!
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 ?
Still works for me. Just popped it into functions.php. Thanks