Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Set oEmbed Max Width in WordPress (4 Easy Methods)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to limit the width of oEmbeds in WordPress?

WordPress automatically embeds third-party content like YouTube videos and Tweets. However, sometimes the embeds may get too wide and ruin your website’s design.

In this article, we will show you how to set oEmbed max width in WordPress so you have more control over your site layout.

Setting oEmbed maximum width in WordPress

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.

A WordPress embed overflowing the content width

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.

Embed shortcode width

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.

oEmbed width adjusted

Method 2: Using the Built-in WordPress Embed Blocks (Easy)

The WordPress block editor comes with several embed blocks for different oEmbed services.

Embed blocks in WordPress

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.’

Adding aligning to an embed block in WordPress

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 common WordPress 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.

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, go to Code Snippets » Add Snippet.

On the next screen, hover your mouse over the ‘Add Your Custom Code (New Snippet)’ option and click the ‘Use snippet’ button when it appears.

Adding a code snippet to WordPress

On the next screen, type in a title for the code snippet. This is just for your reference, so you can use anything you want.

Then, open the ‘Code Type’ dropdown and choose ‘PHP Snippet.’

Adding a PHP code snippet to WordPress

With that done, simply paste the following into the code editor:

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 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.

Activating a custom PHP snippet

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.

Chrome's 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.

Finding CSS classes for embed blocks

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.’

Adding a CSS snippet to WordPress

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.

An example of an embedded social media post, created using Smash Balloon

It supports all of the popular social media embeds, including YouTube, Twitter, and Instagram.

More importantly, Smash Balloon is mobile-responsive and works with any WordPress theme, so your embedded content will always look great.

An example of an embedded Facebook timeline, created using Smash Balloon

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

44 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. 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

  3. 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!

  4. 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!

  5. 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.

  6. 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,

    • 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');
  7. 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?

  8. 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….

  9. 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

  10. 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…

  11. 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!

  12. 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?

  13. Grant Norwood says

    Please note that the $content_width variable must be declared as global before this fix will work.

  14. 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

  15. 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!

  16. Jesse Garnier says

    What value would be appropriate for $content_width for a variable-width or responsive design?

    • 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.

        • 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.

  17. 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.

  18. Jessi Linh says

    It’s been released at right time!!! The name “Elvin” is so special,too.
    Thanks for your post.

    • 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

Leave a Reply to Joe Daniel Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.