Do you want to limit the width of oEmbeds in WordPress?
WordPress automatically embeds third-party content like YouTube videos, Tweets, or Facebook posts. However, sometimes the embeds may get too wide and mess up your page layouts.
In this article, we’ll show you how to set oEmbed max-width in WordPress so you can have more control over your site layout.
Why Fix the OEmbed Maximum Width in WordPress?
WordPress allows you to automatically embed content from select third-party websites into your posts and pages using a technology called oEmbed.
This allows you to easily embed YouTube videos, Facebook posts, tweets, and many other types of content on your website. This content is not hosted on your WordPress website. Instead, it’s displayed directly from these third-party sites.
WordPress is quite good at automatically adjusting the width of the embedded content to your website’s content or sidebar areas.
However, sometimes these embedded content may be too wide and overlap your website’s content areas, like in the example below.
To fix this, you’ll need to explicitly tell WordPress to use a maximum width limit for third-party embeds. Unfortunately, there is no option in WordPress settings to do that.
That being said, let’s take a look at how to easily set oEmbed max width in WordPress without breaking anything.
We’ll cover 4 different methods, and you can choose the one that best suits your needs:
- Set oEmbed width with WordPress shortcode
- Set oEmbed width with WordPress Embed Block
- Set oEmbed max width with CSS
- Set oEmbed max width with WordPress filter (Code Method)
Method 1. Use the Embed Shortcode in WordPress
This method is easier and works really well for setting a max width for video embeds in WordPress.
Instead of pasting the URL or using the YouTube block, you’ll use the shortcode block. Inside it, you need to use the embed shortcode and include width and height parameters.
[embed width="900" height="600"]https://youtu.be/6LwWumPeues[/embed]
Feel free to change the values of the width and height to your own requirements, and replace the embed URL to your own embed.
You can now preview your post or page and see the embed in action.
The embed shortcode and its width and height parameters don’t work for all oEmbed providers. For instance, you cannot use it to set the height and width of a Giphy embed in WordPress.
In that case, you can try one of the alternative methods mentioned below.
Method 2. Use Embed Blocks in WordPress
The default WordPress editor comes with several embed blocks for different oEmbed service providers. You can use them to embed content in different areas of your posts and pages.
Some of these blocks also allow you to change the alignment of the embed and set the content width to wide or full width.
You can try using these options to see if it fixes the maximum width issue for the embed.
Method 3. Use CSS to Set Max Width for Embeds in WordPress
By default, WordPress automatically adds CSS classes to different areas of your posts and pages.
It also adds several CSS classes to embed blocks. These CSS classes can be used to set a maximum width for embeds on your WordPress website.
To find out which CSS classes you need to target, simply embed content in a post or page, and then preview it in your browser. Right-click by taking the mouse over to the embedded content and then select the Inspect tool.
You’ll be able to see all the CSS classes added to the embedded element. You can use these classes to set a maximum width for this type of embed.
For instance, if you wanted to set a maximum width for all embeds, then you can use the following custom CSS.
.wp-block-embed {
max-width: 900px!important;
}
You can also target specific oEmbed providers by using the .wp-block-embed-providername class. For instance, if you wanted to set a maximum width for only Pinterest embeds, then you can use the following custom CSS.
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Method 4. Set oEmbed Max Width Using WordPress Filter
This last method requires you to add custom code to your WordPress website. If you haven’t done this before, then take a look at our guide on how to easily add custom code snippets in WordPress.
For this method, we will add our own code into WordPress to set the default width for oEmbeds. Simply add the following code to your theme’s functions.php file or the Code Snippets plugin.
add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );
function wpbeginner_embed_defaults() {
return array(
'width' => 400,
'height' => 280
);
}
Don’t forget to adjust the height and width attributes to your own requirement.
The problem with this method is that it only applies the width attribute if the embedded content doesn’t have ‘width’ defined. If the embed code already includes width, then this method may not work.
Bonus Tip
If you regularly embed content from social media platforms to your WordPress website, then you should start using Smash Balloon.
It is the best social media plugin for WordPress and allows you to easily embed custom social media feeds in WordPress.
It supports popular social media embeds like YouTube, Twitter, and more. It also allows you to embed Facebook and Instagram content, which is not supported by WordPress.
More importantly, all social media feeds are mobile responsive and work with any WordPress theme.
We hope this article helped you learn how to set an oEmbed max width in WordPress. You may also want to see our complete social media cheat sheet or our expert comparison of the best live chat software for small business.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Andreu says
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
Joe Daniel says
Thank you. I’ve been struggling with this for weeks… works for WP 4.0 with Genesis theme
digg says
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!
Ajit Kumar says
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!
Waymond says
Thanks for posting the solution!
Abhishek Sachan says
not working
Dj says
THANKS! This was driving me crazy.
Anto (@imanto) says
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.
Amir says
Works perfect, thanks a lot!
Pierre Dickinson says
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,
Filip Kojic says
This code doesnt work well. I put my theme name and theme just blocks.
Valerie says
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');John Cronin says
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?
Colin says
Worked like a charm – thanks!
Ryan Silver says
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….
Editorial Staff says
The height is auto-determined to match the 16:9 ratio.
Admin
FIlip Kojic says
It looks like it is 16:10. Here is example:
How can I change height. Please someone answer.
Jasmine Ham says
greats, it’s working! but what if i need it to be responsive?
any idea to doing that?
josef says
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
josef says
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…
Ryan says
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!
Justin Germino says
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?
Editorial Staff says
What is your max width? I have read in the past that Youtube adjusts quality based on the width of the iframe.
Admin
Grant Norwood says
Please note that the $content_width variable must be declared as global before this fix will work.
Nigel Parry says
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.
Editorial Staff says
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.
Admin
Alex Leonard says
Thanks! I was a little baffled as to where the media embed setting had gone to!
Azad says
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!
Azad says
Hey
I got it working, thanks!
Monica says
Hi, where in the functions.php file should this code be placed?
Editorial Staff says
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/
Admin
Jesse Garnier says
What value would be appropriate for $content_width for a variable-width or responsive design?
Editorial Staff says
For responsive design, you probably want to use fitvid.js or something similar to resize your videos.
Admin
Paul Lumsdaine says
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.
Jeremy Myers says
Paul,
Can you include the css you used to set your iframe width to 100%?
Roman says
I use this CSS code for responsive design:
iframe, object, embed { max-width: 100%; } ( if you want you can add -> height: auto )
Tevya says
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.
Melanie says
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.
Editorial Staff says
Change the number 600 to match your theme size. If it is too big for your theme, then make it smaller.
Admin
Jessi Linh says
It’s been released at right time!!! The name “Elvin” is so special,too.
Thanks for your post.
Edward Caissie says
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)
Editorial Staff says
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.
Admin
Devin says
Perfect timing. Thank you!