Are you looking for a way to add the wmode parameter to oEmbeds? oEmbed will turn a YouTube URL or any similar link into an embedded video without the need to add any HTML. While there’s probably a plugin for this, we have created a quick code snippet that you can use to insert wmode parameter into oEmbeds in WordPress.
Instructions:
All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:
add_filter( 'oembed_result', 'slt_wmode_opaque', 10, 3 );
function slt_wmode_opaque( $html, $url, $args ) {
if ( strpos( $html, '<param name="movie"' ) !== false )
$html = preg_replace( '|</param>|', '</param><param name="wmode" value="opaque"></param>', $html, 1 );
if ( strpos( $html, '<embed' ) !== false )
$html = str_replace( '<embed', '<embed wmode="opaque"', $html );
return $html;
}
Supported websites: YouTube, Vimeo, DailyMotion, blip.tv, Flickr, Viddler, Hulu, Qik, Revision3, Scribd, Photobucket, PollDaddy, Google Video, WordPress.tv, SmugMug, FunnyOrDie.com
Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.
If you liked this code snippet, please consider checking out our other articles on the site like: How to create a multi-page form in WordPress and 43 best photography themes for WordPress.
Sorry for the dummy comment, buet how i cam implement that?
Step1: copy the code provide in my functions.php file
Step2: ¿?
I follow step1 but nothings work
This is the first solution I’ve found to this problem that (almost entirely) works! I thank you! However, I’m still having the same problem when I load my site in Chrome (15.0.874.121) for OSX. Firefox works great. Safari works great. I haven’t yet tested in any Windows browsers. Do you know, is there something specific about Chrome that causes this fix not to work, and is there any option to address this?
This function is not browser specific, as it runs on the server. however do you mean that the wmode param does not work in chrome ?
That is correct. It appears to have no effect whatsoever when viewing my site in Chrome. The drop down menu still appears behind the embedded video. But it did fix the problem in Safari and Firefox.
Ahh I see, ok well for your menu to work you would need to change the param to “transparent” rather then “opaque” that should fix things. It is on line 4 and 6,
Hrmm… I tried changing it to transparent but that has had no effect in Chrome.
It appears that you would also need to define a z-index on the flash object as well.
Ok, so.. on the issue of defining a z-index… the issue I’m having is that I’m trying to embed YouTube vids by simply including the YouTube link inline in the post. If there’s an additional parameter I can add to the YouTube link to define the z-index, I’m not aware of it. Where I stand right now, it’s working in every browser I’ve tested except Chrome (which, sadly, is now representing about 25% of my traffic). But I’ve been trying to avoid having to go back to using embed code for simplicity. It seems like this might be as good as it’s going to get without complicating the posting process for my contributors.
That is not what I mean, your dropdown menu will have a z-index defined so the menu will display ontop of content. I did some reading one thing I ran into was they said was to set a z-index for the object eg:
object, embed{
position:relative;
z-index:1;
}
just make sure your menu has a higher z-index if you continue to have problems use the contact form and I can email you about things rather than use the comments.