WordPress makes it easy to create engaging, multimedia pages by automatically embedding third-party content like YouTube videos and Tweets.
However, after working closely with WordPress users for the past 15+ years, a lesson we learned is that oEmbeds can also cause problems. Imagine a YouTube video overflowing its container and pushing all your text to the side, or forcing your call to action button further down the screen.
That’s where setting a maximum width for oEmbeds comes in. It allows you to take control and ensure your embedded content fits seamlessly with your website’s design.
In this article, we will show you how to set oEmbed max width in WordPress so you have complete control over your site layout.
Why Fix the OEmbed Maximum Width in WordPress?
WordPress supports oEmbed, which allows you to automatically embed content from third-party websites. For example, you can easily embed YouTube videos, SlideShare presentations, tweets, and many other types of content.
This content isn’t hosted on your server, so it won’t slow down your website. In particular, you should always use technologies such as oEmbed, and never upload a video to WordPress.
Note: Although Facebook and Instagram both supported oEmbed in the past, Meta has since dropped support for oEmbed. For step-by-step instructions on how to repair this feature, please see our guide on how to fix the Facebook and Instagram oEmbed issue in WordPress.
WordPress will always try to adjust the width of embedded content so that it perfectly fits the available space. However, sometimes the embedded content may be too wide and overlap your website’s other content areas.
Unfortunately, you can’t set a maximum width for third-party embeds using the built-in WordPress tools.
That being said, let’s see how you can add this missing feature and set a maximum oEmbed width in WordPress. Simply use the quick links below to jump straight to the method you want to use:
Method 1: Using the Embed Shortcode (Best for YouTube Videos)
You can set a maximum width using a shortcode. This method is easy, particularly if you only want to set the maximum width for a small number of posts. We’ve also found that this method works well for embedding videos in WordPress blog posts.
However, the embed shortcode and its width and height parameters don’t work for all oEmbed providers. For example, you can’t use it to set the height and width of a Giphy embed in WordPress. In that case, you can try one of the other methods mentioned below.
Instead of pasting the URL into the post editor, you’ll need to create a shortcode block. You can then add width and height parameters to the embed code.
For example, you simply need to wrap the following in embed tags:
width=”900″ height=”600″]https://www.youtube.com/watch?v=6LwWumPeues
Just change the width and height values to suit your own needs and replace the URL with the content you want to embed.
When you are happy with the page, just click on either ‘Update’ or ‘Publish.’
The embedded content should now fit neatly into the available space.
Method 2: Using the Built-in WordPress Embed Blocks (Easy)
The WordPress block editor comes with several embed blocks for different oEmbed services, such as blocks for Twitter, YouTube livestreams and videos, and SoundCloud embeds.
Some of these blocks allow you to change the alignment of the embed and set the content to ‘Wide width’ or ‘Full width.’
If you choose full width, then the embed block and the embedded content will take up the full width of the screen. If you choose wide width, then the embed block will take up the entire width, but the content will remain the same size.
The end result may vary depending on your WordPress theme. However, this is a quick and easy method, so it’s worth seeing if it works for your WordPress website.
Simply click on the ‘Align’ button in the small toolbar above the block. Then, select either ‘Wide width’ or ‘Full width.’
If this fixes the maximum width issue for the embed, then you can go ahead and publish the page. If you are not happy with how it looks, then you’ll need to try a different method.
Method 3: Using Custom PHP (Set a Max Width for All Embeds)
Sometimes you may want to set a maximum width for all embedded content. The easiest way to do this is by adding custom code to your WordPress website.
The problem with this method is that the maximum width attribute will only work if the embedded content doesn’t already have a ‘width’ defined. If the embed code already includes its own ‘width’ attribute, then this method may not work.
If you haven’t edited your site’s code before, then take a look at our guide on how to easily add custom code snippets in WordPress.
Some guides ask you to edit the theme files manually, but this can cause all kinds of errors and may even completely break your website.
For that reason, we recommend using WPCode. It makes it easy to add code snippets in WordPress without having to edit your theme files. That way, you can update or change your theme without losing all your custom code functions.
WPCode also comes with a library of pre-configured code snippets, which includes a ‘Set oEmbed Max Width’ snippet. This allows you to specify a maximum width and height for your oEmbeds.
First, you will need to install and activate the free WPCode plugin. For more information, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, navigate to Code Snippets » Library in your WordPress admin panel.
Here, you can search for ‘Set oEmbed Max Width’ and hover your mouse over the result named the same thing.
You can then click on ‘Use Snippet.’
WPCode will then take you to the ‘Edit Snippet’ page, where the plugin has already configured everything for you.
Here, you’ll notice the following ready-made code snippet:
function wpcode_snippet_oembed_defaults( $sizes ) {
return array(
‘width’ => 400,
‘height’ => 280,
);
}
add_filter( ’embed_defaults’, ‘wpcode_snippet_oembed_defaults’ );
By default, this sets the maximum width to ‘400’ and the maximum height to ‘280.’ Don’t forget to adjust the height and width attributes to suit your needs.
Finally, click on the ‘Inactive’ slider so that it shows ‘Active.’ Then just click the ‘Save Snippet’ or ‘Update’ button to make the code snippet live.
Method 4: Using CSS (Set Max Width for Specific Embed Types)
By default, WordPress automatically adds CSS classes to different areas of your site.
It also adds several CSS classes to embed blocks. You can use these CSS classes to set a maximum width for embeds on your WordPress blog.
This is a good choice if you want to set a maximum size for a specific type of embed, such as embedded Tweets. It also allows you to create a maximum size for all embedded content, regardless of type.
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.
Then, hover your mouse over the embedded content and right-click. In the menu that appears, select the ‘Inspect’ tool.
This opens a new panel showing all the CSS classes WordPress added to the embedded content. You can use these classes to set a maximum width for this type of embed.
To target a specific oEmbed provider, you’ll typically use .wp-block-embed-providername, so look for this class in the panel.
For example, in the following image, we’ve underlined the .wp-block-embed-providername class. On this line, we can also see a .wp-block-embed-pinterest class.
You can set a maximum width for Pinterest embeds only using the .wp-block-embed-pinterest class.
For example:
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Just be aware you may need to replace .wp-block-embed-pinterest with a different CSS class, depending on the content you want to target.
If you want to set a maximum width for all embeds, then you can use the following snippet:
.wp-block-embed {
max-width: 900px!important;
}
The easiest way to add custom CSS to your website is by using WPCode. Simply create a new custom snippet following the same process described above.
However, this time open the ‘Code Type’ dropdown and select ‘CSS Snippet.’
You can now save and publish this snippet in exactly the same way you make any WPCode snippet live.
With that done, WordPress will use this value as the maximum size for your embeds.
Bonus Tip: How to Easily Add Your Social Media Feeds to WordPress
If you regularly embed content from social media platforms, then you can save a lot of time and effort by using Smash Balloon.
Smash Balloon is the best social media plugin for WordPress and allows you to easily add your social media feeds to a WordPress website.
It supports all of the popular social media embeds, including YouTube, Twitter, Instagram, and TikTok videos.
More importantly, Smash Balloon is mobile-responsive and works with any WordPress theme, so your embedded content will always look great.
We hope this article helped you learn how to set an oEmbed max width in WordPress. You may also want to see our guide on how to easily embed iFrame code in WordPress, 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.
