Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Set oEmbed Max Width in WordPress 3.5 with $content_width

Last updated on by
Follow WPBeginner on YouTube
How to Set oEmbed Max Width in WordPress 3.5 with $content_width

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.

Media Settings oEmbed Width

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


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Dj

    THANKS! This was driving me crazy.

  • Anto (@imanto)

    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

    Works perfect, thanks a lot!

  • Pierre Dickinson

    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

      This code doesnt work well. I put my theme name and theme just blocks.

    • Valerie

      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

    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

    Worked like a charm – thanks!

  • Ryan Silver

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

    • http://www.wpbeginner.com Editorial Staff

      The height is auto-determined to match the 16:9 ratio.

      • FIlip Kojic

        It looks like it is 16:10. Here is example:

        How can I change height. Please someone answer. :)

  • Jasmine Ham

    greats, it’s working! but what if i need it to be responsive?
    any idea to doing that?

  • 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… thanks in advance
    Josef

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

  • Ryan

    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

    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?

    • http://www.wpbeginner.com Editorial Staff

      What is your max width? I have read in the past that Youtube adjusts quality based on the width of the iframe.

  • Grant Norwood

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

  • Nigel Parry

    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.

    • http://www.wpbeginner.com Editorial Staff

      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.

  • Alex Leonard

    Thanks! I was a little baffled as to where the media embed setting had gone to!

  • Azad

    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

      Hey :)
      I got it working, thanks!

  • Monica

    Hi, where in the functions.php file should this code be placed?

  • Jesse Garnier

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

    • http://www.wpbeginner.com Editorial Staff

      For responsive design, you probably want to use fitvid.js or something similar to resize your videos.

    • Paul Lumsdaine

      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

        Paul,

        Can you include the css you used to set your iframe width to 100%?

        • Roman

          I use this CSS code for responsive design:

          iframe, object, embed { max-width: 100%; } ( if you want you can add -> height: auto )

        • Tevya

          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

    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.

    • http://www.wpbeginner.com Editorial Staff

      Change the number 600 to match your theme size. If it is too big for your theme, then make it smaller.

  • Jessi Linh

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

  • Edward Caissie

    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)

    • http://www.wpbeginner.com Editorial Staff

      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.

  • Devin

    Perfect timing. Thank you!