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 popups etc. In this article, we will show you how to prevent YouTube oEmbed from overriding your WordPress content.

Example:

When you embed a video in WordPress, by default it does not have wmode=transparent value. What that means is that video elements have the highest priority and it will override any floating or dynamic element.

This gets really annoying. So let’s take a look at how to add ?wmode=transparent to YouTube videos in WordPress without using the ugly iFrames method.

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