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
Elegant Themes
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:

Youtube oEmbed issue

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 »
  • Rick Smith

    Quick question, when I put this code in the pop ups (like if I hit like on one of my posts) come in front of my videos but they are still going behind my google ads. Click like on this post and you’ll see what I mean. Any thoughts on how to correct that? Thanks so much.

    Here’s an example; http://noahsdad.com/how-to-be-a-good-dad/

    • http://www.wpbeginner.com Editorial Staff

      Can’t see the example, but this technique is only for Youtube videos. You would have to do something similar for Google adsense tags.

  • Will

    hi with firefox wmode=transparent is necessary to fix the issue.

    i have change your code in this way:

    function add_video_wmode_transparent($html, $url, $attr) {
    if ( strpos( $html, “<embed src=" ) !== false )
    { return str_replace('<embed', '<embed wmode="transparent" ', $html); }
    elseif ( strpos ( $html, 'feature=oembed' ) !== false )
    { return str_replace( 'feature=oembed', 'feature=oembed&wmode=transparent', $html ); }
    else
    { return $html; }
    }
    add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

    i hope that's work for all…

  • Gabe Halberg

    Fantastic! Works just right. Thanks!