WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» Themes» How to Set oEmbed Max Width in WordPress 3.5 with $content_width

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

Last updated on December 11th, 2012 by Editorial Staff
71 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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).

71 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

43 Comments

Leave a Reply
  1. Andreu says:
    Dec 3, 2014 at 3:47 pm

    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

    Reply
  2. Joe Daniel says:
    Nov 15, 2014 at 4:57 pm

    Thank you. I’ve been struggling with this for weeks… works for WP 4.0 with Genesis theme

    Reply
  3. digg says:
    Jul 31, 2014 at 6:55 am

    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!

    Reply
  4. Ajit Kumar says:
    Jun 13, 2014 at 10:00 am

    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!

    Reply
    • Waymond says:
      Jul 30, 2014 at 3:56 pm

      Thanks for posting the solution!

      Reply
  5. Abhishek Sachan says:
    Jun 6, 2014 at 2:46 am

    not working

    Reply
  6. Dj says:
    Jun 5, 2014 at 8:03 pm

    THANKS! This was driving me crazy.

    Reply
  7. Anto (@imanto) says:
    Jan 23, 2014 at 5:32 pm

    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.

    Reply
  8. Amir says:
    Dec 17, 2013 at 3:11 am

    Works perfect, thanks a lot!

    Reply
  9. Pierre Dickinson says:
    Nov 22, 2013 at 4:44 am

    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,

    Reply
    • Filip Kojic says:
      Mar 5, 2014 at 4:58 pm

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

      Reply
    • Valerie says:
      Mar 20, 2014 at 11:07 pm

      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');
      Reply
  10. John Cronin says:
    Sep 8, 2013 at 9:54 am

    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?

    Reply
  11. Colin says:
    Aug 20, 2013 at 11:20 am

    Worked like a charm – thanks!

    Reply
  12. Ryan Silver says:
    Jul 25, 2013 at 8:45 pm

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

    Reply
    • Editorial Staff says:
      Jul 27, 2013 at 7:56 am

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

      Reply
      • FIlip Kojic says:
        Mar 5, 2014 at 5:00 pm

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

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

        Reply
  13. Jasmine Ham says:
    Jul 17, 2013 at 11:54 pm

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

    Reply
  14. josef says:
    May 29, 2013 at 7:22 pm

    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

    Reply
  15. josef says:
    May 29, 2013 at 7:22 pm

    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…

    Reply
  16. Ryan says:
    May 3, 2013 at 1:13 am

    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!

    Reply
  17. Justin Germino says:
    Mar 24, 2013 at 3:14 pm

    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?

    Reply
    • Editorial Staff says:
      Mar 26, 2013 at 7:52 am

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

      Reply
  18. Grant Norwood says:
    Mar 14, 2013 at 11:37 am

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

    Reply
  19. Nigel Parry says:
    Mar 1, 2013 at 9:31 pm

    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.

    Reply
    • Editorial Staff says:
      Mar 2, 2013 at 6:49 am

      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.

      Reply
  20. Alex Leonard says:
    Feb 1, 2013 at 10:23 am

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

    Reply
  21. Azad says:
    Jan 12, 2013 at 8:29 am

    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!

    Reply
    • Azad says:
      Jan 12, 2013 at 9:02 am

      Hey :)
      I got it working, thanks!

      Reply
  22. Monica says:
    Jan 6, 2013 at 12:15 am

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

    Reply
    • Editorial Staff says:
      Jan 10, 2013 at 10:58 am

      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/

      Reply
  23. Jesse Garnier says:
    Jan 2, 2013 at 10:04 am

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

    Reply
    • Editorial Staff says:
      Jan 5, 2013 at 8:59 am

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

      Reply
    • Paul Lumsdaine says:
      Mar 25, 2013 at 3:13 pm

      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.

      Reply
      • Jeremy Myers says:
        Jul 6, 2013 at 11:54 pm

        Paul,

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

        Reply
        • Roman says:
          Jul 19, 2013 at 8:48 am

          I use this CSS code for responsive design:

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

        • Tevya says:
          Aug 22, 2013 at 2:47 pm

          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.

  24. Melanie says:
    Dec 17, 2012 at 4:56 pm

    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.

    Reply
    • Editorial Staff says:
      Dec 18, 2012 at 7:55 am

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

      Reply
  25. Jessi Linh says:
    Dec 14, 2012 at 10:18 pm

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

    Reply
  26. Edward Caissie says:
    Dec 13, 2012 at 10:52 am

    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)

    Reply
    • Editorial Staff says:
      Dec 13, 2012 at 12:07 pm

      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.

      Reply
  27. Devin says:
    Dec 12, 2012 at 1:13 am

    Perfect timing. Thank you!

    Reply

Leave a Reply 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WP Mail SMTP logo
WP Mail SMTP
Fix WordPress email delivery issues. #1 SMTP plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
MainWP
MainWP Coupon
Get 15% OFF on MainWP WordPress multisite manager plugin.
Sprout Invoices
Sprout Invoices Coupon
Get 50% OFF on Sprout Invoices WordPress invoicing plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.