Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Prevent Youtube oEmbed from Overriding your WordPress Content

Last updated on by
Follow WPBeginner on YouTube
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:

Youtube oEmbed issue

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


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »