Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

When you hover over my drop-down menu using IE8 or IE9, the menu div will display behind the YouTube embedment. It works fine on all other browsers.

Upon research, I found out that many others have the same problem and the solution is to set the wmode attribute to transparent. So for instance <iframe width="578" height="325" src="http://www.youtube.com/embed/XXXX?wmode=transparent"></iframe> or <param name="wmode" value="transparent" />.

My question is, how do I adjust the Wordpress [embed] shortcode to set the wmode attribute to transparent?

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

You can filter the HTML output for oEmbed with oembed_result. Now test the HTTP host of the URL for www.youtube.com and add the parameter.

The oEmbed result is cached in a post meta field to avoid too many requests. To update old posts I have added an activation helper that clears those cached content for Youtube embeds only.

<?php  # -*- coding: utf-8 -*-
/* Plugin Name: Add 'wmode' to video embeds */

register_activation_hook( __FILE__, 't5_clear_oembed_cache' );
add_filter( 'oembed_result', 't5_oembed_wmode', 10, 2 );

/**
 * Add "wmode=transparent" query string to youtube embeds.
 *
 * @wp-hook oembed_result
 * @param   string $html
 * @param   string $url
 * @return  string
 */
function t5_oembed_wmode( $html, $url )
{
    if ( 'www.youtube.com' !== parse_url( $url, PHP_URL_HOST ) )
        return $html;

    return str_replace( '=oembed', '=oembed&amp;wmode=transparent', $html );
}

/**
 * Clear oEmbed cache for all youtube embeds.
 *
 * @return void
 */
function t5_clear_oembed_cache()
{
    global $wpdb;

    $posts = $wpdb->get_results(
        "SELECT post_id, meta_key
            FROM  `$wpdb->postmeta`
            WHERE  `meta_key` LIKE  '_oembed%'
                AND `meta_value` LIKE  '%youtube%'"
    );

    if ( ! $posts )
        return;

    /*
    return print '<pre>$posts = ' . htmlspecialchars( print_r( $posts, TRUE ), ENT_QUOTES, 'utf-8', FALSE ) . "</pre>\n";
    /*/
    foreach ( $posts as $post )
        delete_post_meta( $post->post_id, $post->meta_key );
    /**/
}

Be aware this attribute makes the videos inaccessible for screen reader users, so they cannot listen to them. So the better option would be to use the HTML5 output from Youtube instead.

share|improve this answer
    
Thank you very much for posting a solution to this issue. I tested this on IE8. I viewed an old post and it didn't work. Then I tested on a new post and it worked perfectly (the old post may have been cached although I did view it logged-in). My question is, do old posts need to be re-published for this to have effect? Nonetheless, this very issue was my final optimisation for old IE versions, thank you. –  Christine Cooper Apr 3 '13 at 15:38
    
@ChristineCooper Oembed output is cached. You have to save the post again to get fresh output. –  toscho Apr 3 '13 at 15:57
    
Got it! Also, does this take effect if the user added youtube.com* (without the www) and https://www.yout*...? –  Christine Cooper Apr 3 '13 at 16:09
    
What the users has written doesn't matter; the oembed API will always return www.youtube.com. Wait a minute; I'm writing a cache refresher for that plugin right now. :) –  toscho Apr 3 '13 at 16:11
    
@ChristineCooper See my update. Install the new plugin to get rid of all the old cached data. –  toscho Apr 3 '13 at 16:25
show 1 more comment

That is a terrible idea as Flash movies with wmode transparent are not available to blind users with screenreaders any longer. Blind people do like to listen to videos, before that old chestnut comes up again. Use the HTML5 video embed to make it work for everyone and IE8 users getting a link to youtube. Don't make your accessibility suffer because old IE were terrible with embedding.

share|improve this answer
1  
Can you provide code that would facilitate this? In particular, can you explain how to modify the [embed] shortcode mentioned in the question? –  s_ha_dum Apr 3 '13 at 17:08
    
Thank you for letting us know about this issue. –  Christine Cooper Apr 4 '13 at 15:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.