I was investigating an interring issue today: YouTube videos I was embedding on this very site did not fill the whole width of my theme. They were 500 pixels wide, and I know that P2 supports something a bit larger than that.
It didn’t really bother me, until I thought that embeds on my other site which is also using P2 look so much better. What was going on? What was the other site doing that this one wasn’t?
Turns out there are actually three different things to watch out for, and I’ll tell you about each one in a moment.
I remember vividly that there was an option under Settings – Media where you could set how wide and tall your auto embeds should be – but as of WordPress 3.5 this has been removed. If your website has been around for a while (like mine has) then these residual values may still be in the database and WordPress may still use them – as was the problem in my case.
What is oEmbed and how does it work?
oEmbed is complex stuff, and WordPress uses it when you add say a YouTube URL on its own line to see how wide a video needs to be when the post is displayed. Rather than parsing the actual resource at display time, the oEmbed protocol is a handshake between your blog and the resource provider (in our example, YouTube). The site receives what the resource is and the best content for the width that’s requested.
It works with a whole range of items, for example Flickr pictures, Vimeo videos, Kickstarter campaigns, single Tweets, the list goes on. Read all about it at http://oembed.com, and how it works in WordPress specifically: https://codex.wordpress.org/Embeds
WordPress determines how high and wide a resource can be at display time. This is a value that is set by your theme. In P2 for example, that’s 632 pixels for the content in a post.
However, some themes don’t set such a value, in which case WordPress assumes it to be 500 wide and up to 1000 high (that’s defined in wp-includes/media.php).
How do we change this?
Option 1: Override the default content_width with a filter
We can override this default value by hooking into the embed_defaults action. Here’s how:
// override default oEmbed size
function your_own_embed_size() {
return array( 'width' => 600, 'height' => 450 );
}
add_filter( 'embed_defaults', 'your_own_embed_size' );
Add this to your theme’s functions.php file and feel free to experiment with those values. Thanks to Canton Becker for this tip.
Option 2: set a content_width value in your theme
As a theme developer (or modifier) you probably know best how wide content needs to be in your particular theme. It’s easy to provide a content_width value – in which case WordPress will not override it with the defaults declared above.
if (!isset ($content_width)) {
$content_width = 600;
}
Add this to your theme’s functions.php file, and replace the value with a width best suited for your needs. Thanks to Thomas Scholz for this tip.
Option 3: Check for old values in your database
In my case, both the above options did not make my YouTube video the 632 pixels wide that I wanted them to be. The only explanation I had was that perhaps there were old values in the database that were still being called (this site has been live since 2008 and has seen a WordPress upgrade or two).
And that’s exactly what it was: in the options table, I found the following two values:
option_name option_value autoload embed_size_w 500 YES embed_size_h 0 YES
I can’t say for certain that these were put there by WordPress in a past life, or by an old theme, or by a plugin – but deleting those solved my problem and my videos now embed perfectly.
Hope these notes help you or me in the future 😉
- http://oembed.com
- https://codex.wordpress.org/Embeds
- http://cantonbecker.com/work/musings/2011/how-to-change-automatic-wordpress-youtube-embed-size-width/
- http://www.wpbeginner.com/wp-themes/how-to-set-oembed-max-width-in-wordpress-3-5-with-content_width/
- http://wordpress.stackexchange.com/questions/76102/how-can-i-change-max-embed-size-in-wordpress-3-5
1 thought on “How to change the width of an automatic oEmbed in WordPress”