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

2 comments

1. 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.

   Log in to Reply

2. 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.

   Log in to Reply