How to Prevent Youtube oEmbed from Overriding your WordPress Content

Have you ever been to a site where you notice that media elements such as youtube videos override other content? This can happen if you have drop down menus, floating bars, lightbox popup etc. Well as designers, this get really frustrating for us. In the past, you would have to add ?wmode=transparent to each video embed code, but with WordPress 2.9, embedding videos have gotten much easier. All you have to do is paste the URL of a video, and it will auto-embed. However, this makes it harder for us to add the ?wmode=transparent tag to each video. Well, you don’t have to worry. In this article, we will share with you a snippet that prevents Youtube and any other media files that are embedded via oEmbed from overriding your WordPress content.

Example:

All you have to do is open your theme’s functions.php file or better yet your site’s plugin file and paste the following code:

function add_video_wmode_transparent($html, $url, $attr) {

if ( strpos( $html, "<embed src=" ) !== false )
   { return str_replace('</param><embed', '</param><param name="wmode" value="opaque"></param><embed wmode="opaque" ', $html); }
elseif ( strpos ( $html, 'feature=oembed' ) !== false )
   { return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html ); }
else
   { return $html; }
}
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

Source