Today, we saw the release of WordPress 3.5 which came with tons of amazing features. As we upgraded one site after another, we noticed an issue on one of the sites we manage. The embedded video size were changed, and the embedded videos were a lot smaller. We went in the settings to find that the option to specify oEmbed max width and height were removed. In an attempt to simplify the admin panel, the core team got rid of the oEmbed max width and height settings screen. In this article, we will show you how to set oEmbed max width in WordPress 3.5 with $content_width.
What changed? and Why?
In the past, in your Settings » Media screen there was an option to set the oEmbed max width and height.
Well, this option is no longer there in WordPress 3.5. The decision was made to make things simpler. There is no harm in auto-enabling oEmbeds in WordPress. If it is not enabled by default, beginners often get confused. The core devs also decided to get rid of the oEmbed max width and height fields in favor of using theme’s content width and make the height 1.5 times the content width. If your theme doesn’t have the content width defined, then your oEmbed sizes will be a lot smaller. This is exactly what happened to one of the sites we manage. The theme that was being used did not have $content_width specified.
How to Fix the oEmbed Width Issue in WordPress 3.5
Open your theme’s functions.php file, and add the following code:
if ( ! isset( $content_width ) ) $content_width = 600;
Remember to change the number 600 appropriately for your theme. It is the maximum width in pixels for your content area.
Once you do this, WordPress will automatically use that for the maximum width of your oEmbed elements (youtube videos, slideshare, etc).
The problem of this is that it makes the max width of the images also to the size defined. What can I do if I want to limit the embed width in the editor but not the image one? Thanks
Thank you. I’ve been struggling with this for weeks… works for WP 4.0 with Genesis theme
Hi, it works perfectly for me.
But this affects to the overall site, which have different widths since there are full-width pages, with sidebars, or forums, etc.
Is it possible to discriminate this to affect only bbpress forum’s pages?
It will be very useful, thanks!
For anybody who can’t get this working or if Youtube videos and other iframe content are not getting resized, you will need to add the following code to your style.css
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
Hope this helps. And Syed, thanks for the great post!
Thanks for posting the solution!
not working
THANKS! This was driving me crazy.
You can’t use iframe, object, embed { max-width: 100%; height:auto;} yes it gets the width correct and makes the video responsive, but it doesnt fix the height when viewing in the browser.
Is there actually a way to do this? Ive tried pretty much everything, even fitvids dont work because you are setting a px base width in the functions, but it shows that width on mobile, then when you try to correct that with max-width, the height messes up even in the browser….
im thinking media queries or something? ugh im beat.
Works perfect, thanks a lot!
Hi, thanks for the tip, but it doesn’t work, here’s what you need in your function.php file :
add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
function yourthemename_embed_defaults($defaults) {
$defaults[‘width’]=600; // or whatever you want
$defaults[‘height’]=360; // or whatever you want
return $defaults;
}
it works great!
Regards,
This code doesnt work well. I put my theme name and theme just blocks.
Not sure if the other commenter realized it, but the code has curly quotes and would break a site. Gonna test here to see if shortcode wrappers will prevent the change that broke the code…
add_filter('embed_defaults','yourthemename_embed_defaults');I am attempting to post a high-end animation film from YouTube to my WordPress blog. The bottom of the frame is cut off in the preview. Once the play arrow is clicked, this problem goes away. But the filmmaker is rightfully unhappy that the preview in the post will give the appearance of an error. Adjusting height and width in the post code works, but does not solve the problem. Ideas?
Worked like a charm – thanks!
Hi there,
I used your solution for width and it worked great. But how do I set the height now? Is it just the same if ( ! isset( $content_width ) ) $content_width = 560; but with the word ‘width’ is replaced with the word ‘height’ ? I tried that and it did not work….
The height is auto-determined to match the 16:9 ratio.
It looks like it is 16:10. Here is example:
How can I change height. Please someone answer.
greats, it’s working! but what if i need it to be responsive?
any idea to doing that?
hi,
is there a way to force all ifreams in the site to be 100% widht. not omly youtube
i have about 300 ifreams and all fixed size so… thanks in advance
Josef
hi,
is there a way to force all ifreams in the site to be 100% widht. not omly youtube
i have about 300 ifreams and all fixed size so…
I added this code to my functions.php but it made no difference, and I assume that’s because my theme doesn’t define $content_width.
I see the link to the codex about defining it, but I’m not a developer and don’t have one on call; how does one add a $content_width definition to a theme? Where does it go? Thanks!
This worked perfectly, is there anyway to force and default the video to HD quality instead of SD quality which seems to be the default even though in my YouTube settings I have it set to default to HD?
What is your max width? I have read in the past that Youtube adjusts quality based on the width of the iframe.
Please note that the $content_width variable must be declared as global before this fix will work.
WP seems to be updated by people who are unclear about the centrality of multimedia on the Internet. Why this basic preference would have to require code intervention I don’t know. WP clearly could not tell how wide my columns were. Anyway, all fixed now. You folks rock.
Well Nigel, there is more to it. They are trying to make WordPress easier to use for “users”. Overtime, WordPress has added one option after another. This gets really terrifying for new users. This is why they are going with decisions over options route. The hope with this oEmbed max width is that each theme designer should/will define it in their themes, so the end-user doesn’t have to worry about it.
Thanks! I was a little baffled as to where the media embed setting had gone to!
Hello
Thanks for your post.
But I can’t get this right, I wrote the other post you mentioned in the comments. But I still can’t get it working, I put this:
At the begginin of my functions.php, but then my whole site stoped working. everything turned white, I had to edit the file through ftp to get it working again.
What am I doing wrong?
Thanks!
Hey
I got it working, thanks!
Hi, where in the functions.php file should this code be placed?
You can paste it in the beginning or at the end as long as it is independent of other functions. Here is an article on that:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
What value would be appropriate for $content_width for a variable-width or responsive design?
For responsive design, you probably want to use fitvid.js or something similar to resize your videos.
I was able to kind of get the responsiveness to work with setting a max-width: 100% on my iframes in CSS. Of course the height is set automatically depending on your content width but this should at least get it working correctly without using any extra js. Fitvid is the way to go, but this worked for me.
Paul,
Can you include the css you used to set your iframe width to 100%?
I use this CSS code for responsive design:
iframe, object, embed { max-width: 100%; } ( if you want you can add -> height: auto )
Unfortunately Roman’s CSS either doesn’t work on some themes or doesn’t work with the new WP 3.6 media player that’s built-in to core. I just tried it and nothing. I’m trying to get a theme that’s responsive to keep the new WP 3.6 player responsive as well, but no luck so far. The 2012 theme seems to handle it very nicely, but I can’t figure out what they’re doing different than this theme I’m working with.
I am a novice to WP & coding, with that said not sure where to put the code “if ( ! isset( $content_width ) ) $content_width = 600;” I went to the function.php file in my Suffusion theme and not sure where exactly to insert this code. I tried a number of places where it mentioned video attachment and it is not working. In my case, the embedded videos are now too big for my theme since upgrading to WP 3.5.
Change the number 600 to match your theme size. If it is too big for your theme, then make it smaller.
It’s been released at right time!!! The name “Elvin” is so special,too.
Thanks for your post.
This is part of the reason setting an appropriate $content_width value is a requirement under the WordPress Theme Review guidelines (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Yup, totally agreed with you there. Only poorly coded themes will not have that. But there are a lot of those out there. A theme that one of our clients was using had that piece missing. Overall, its a good theme.
Perfect timing. Thank you!