Home / functions.php / Insert wmode parameter into oEmbeds
  • How to Insert wmode parameter into oEmbeds


    Adding this snippet to the functions.php of your wordpress theme will add the wmode parameter to oembeds. What is oEmbed? For example oEmbed will turn a youtube URL into an embedded video without the need to add any html. Supported websites: YouTube, Vimeo, DailyMotion, blip.tv, Flickr, Viddler, Hulu, Qik, Revision3, Scribd, Photobucket, PollDaddy, Google Video, WordPress.tv, SmugMug, FunnyOrDie.com

    ( click code to copy )

    wordpress snippet : PHP

    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;

    ( WordPress codex functions, hooks, in this snippet. )

  • 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{

          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.

  • Maxi

    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