Add Query String Parameters to YouTube oEmbeds in WP

If you manage a WordPress site with multiple content editors and authors, chances are that everybody will do things slightly differently and will often forget how to do the little things. That’s why, as developers, when you have the opportunity to make something be as consistent and easy as possible, you do it!

WordPress makes embedding content easy as of version 3.5+ with the introduction of oEmbeds. This allows a content editor in WordPress to simply copy-and-paste a URL from Youtube, or Twitter, or many other services that support the format into the post editor and have it automatically pull in a video or tweet directly into the post.

In this case we’ll focus in on YouTube, since YouTube has a number of parameters that you can pass in to control the output of the embedded player. Unfortunately, having to tell your editors to attach certain “query what?” things to their YouTube links that they copy pasta into the WordPress editor is a huge pain and is definitely going to fail quickly. Especially after the introduction of automagical embedding using oEmbed where they instantly see results.

The Solution

Let authors copy their links from YouTube. We’ll take care of this one behind-the-scenes.

This snippet will allow you to pass whatever custom query string parameters you want on all of your YouTube oEmbeds, without having to worry about editors having to do things a certain way. I normally use these parameters on my YouTube embeds (highlighted in red in the code below):

• showinfo = 0 – Hides video title bar.
• modestbranding = 1 – Hides the YouTube logo in the controls. (YouTube text still shows in the player when paused.)
• autohide = 1 – Player controls and progress bar show/hide automatically when playing/pausing.
• rel = 0 – Stops the player from showing related videos.

/**
 * YouTube oEmbeds w/ query string parameters
 */
add_filter( 'embed_oembed_html', 'embed_youtube_parameters');
add_filter( 'video_embed_html', 'embed_youtube_parameters' ); // Jetpack
function embed_youtube_parameters( $code ) {
    if( strpos( $code, 'youtu.be' ) !== false || strpos( $code, 'youtube.com' ) !== false ) {
        $return = preg_replace( '@embed/([^"&]*)@', 'embed/$1&showinfo=0&modestbranding=1&autohide=1&rel=0', $code );
    }
    return '<div class="embed-container">' . $return . '</div>';
}

This method, when combined with the nearly identical code in my post, Replace Insecure YouTube oEmbeds Automagically, will help create a very consistent and sanity-friendly solution.