Set wmode attribute to transparent for the embed shortcode to make drop-down menu hover over YouTube embed in Internet Explorer

by

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 shortcode to set the wmode attribute to transparent?

2 Answers
2

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.

Leave a Comment