Wordpress wp_embed videos problem with pop up and menus

If you are using a template that is calling the $wp_embed shortcode function for videos, you may have noticed that sticky navigation menus and popups will appear UNDER YouTube videos in Internet Explorer. This is generally caused because the embed/iframe wmode is not set to opaque by default. I found a quick and easy way to set this in your functions.php file to fix the issue.

This is working in WordPress 3.7x, just add it to the bottom of your theme function file:

1
2
3
4
5
6
7
8
9
10

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);

That bit of code adds the wmode=”opaque” to the output of the shortcode and will generally help with all popups and sticky navigation.