WordPress simplifies the process of creating captivating multimedia pages by automatically integrating third-party content, such as YouTube videos and tweets.
However, after over 15 years of experience working with WordPress users, we’ve learned that oEmbeds can sometimes lead to issues. For instance, a YouTube video might overflow its container, pushing your text aside or relocating your call-to-action button further down the page.
This is where setting a maximum width for oEmbeds becomes essential. It enables you to manage the layout effectively, ensuring that your embedded content aligns perfectly with your website’s design.
In this article, we will guide you through the process of setting the maximum width for oEmbeds in WordPress, giving you full control over your site’s layout.
Why Adjust the OEmbed Maximum Width in WordPress?
WordPress offers oEmbed support, allowing you to seamlessly embed content from various third-party websites. This includes easily adding YouTube videos, SlideShare presentations, tweets, and other content types.
Since this content is not hosted on your server, it won’t impact your website’s loading speed. It’s advisable to utilize technologies like oEmbed instead of uploading videos directly to WordPress.
Note:While Facebook and Instagram previously supported oEmbed, Meta has discontinued this feature. For detailed guidance on resolving this issue, refer to our comprehensive guide on fixing the Facebook and Instagram oEmbed problem in WordPress.
WordPress automatically adjusts the width of embedded content to fit the available space. However, there are times when the embedded content may exceed the designated width and overlap with other elements on your website.
Unfortunately, the built-in tools in WordPress do not allow you to set a maximum width for third-party embeds.
However, let’s explore how to implement this missing feature and establish a maximum oEmbed width in WordPress. You can use the quick links below to navigate directly to your preferred method:
- Method 1: Embedding with Shortcodes (Ideal for YouTube Videos)
- Method 2: Utilizing Built-in WordPress Embed Blocks (User-Friendly)
- Method 3: Custom PHP Implementation (Set a Maximum Width for All Embeds)
- Method 4: CSS Customization (Define Maximum Width for Specific Embed Types)
- Bonus Tip: Effortlessly Integrate Your Social Media Feeds into WordPress
Method 1: Embedding with Shortcodes (Ideal for YouTube Videos)
You can easily set a maximum width using a shortcode, which is particularly useful for adjusting the width of a few posts. This approach is effective for embedding videos within your WordPress blog posts.
Keep in mind that the embed shortcode along with its width and height settings may not be compatible with all oEmbed providers. For instance, it won’t allow you to adjust the dimensions of a Giphy embed in WordPress. In such cases, consider exploring the alternative methods outlined below.
Rather than simply pasting the URL into the post editor, you should create a shortcode block. This allows you to incorporate width and height parameters directly into the embed code.
For instance, you just need to enclose the following inembedtags:
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
Simply adjust the width and height values to meet your requirements and replace the URL with the content you wish to embed.
Once you are satisfied with the page, click ‘Update’ or ‘Publish’ to save your changes.
The embedded content should now fit perfectly within the designated space.
Method 2: Utilizing the Built-in WordPress Embed Blocks (Simple)
The WordPress block editor includes various embed blocks for different oEmbed services, such as those for Twitter, YouTube live streams and videos, and SoundCloud.
Certain blocks allow you to adjust the alignment of the embed and set the content to either ‘Wide width’ or ‘Full width.’
Choosing ‘Full width’ means the embed block and its content will occupy the entire screen width. Selecting ‘Wide width’ allows the embed block to span the full width, while the content itself remains the same size.
The outcome may differ based on your WordPress theme. Nevertheless, this is a straightforward method, so it’s worth testing to see if it suits your WordPress site.
To adjust the width, simply click the ‘Align’ button in the small toolbar above the block, then choose either ‘Wide width’ or ‘Full width.’
If this resolves the maximum width issue for the embed, you can proceed to publish the page. If you’re not satisfied with the appearance, you may need to explore alternative methods.
Method 3: Implementing Custom PHP to Set a Maximum Width for All Embeds
At times, you might want to establish a maximum width for all embedded content. The simplest way to achieve this is by adding custom code to your WordPress site.
This method’s limitation is that the maximum width setting will only take effect if the embedded content does not already specify a ‘width’. If the embed code has its own ‘width’ attribute, this approach may not function as intended.
If you’re new to editing your site’s code, we recommend checking out our guide on how to easily add custom code snippets in WordPress.
Some tutorials suggest manually editing theme files, but this can lead to various errors and may even break your website entirely.
For this reason, we suggest using WPCode. It simplifies the process of adding code snippets in WordPress without the need to modify your theme files. This way, you can update or change your theme without losing your custom code functionalities.
WPCode also features a library of pre-configured code snippets, including one for ‘Setting oEmbed Max Width’. This enables you to define a maximum width and height for your oEmbeds.
To get started, you will need to install and activate the free WPCode plugin. For detailed instructions, refer to our step-by-step guide on how to install a WordPress plugin.
After activation, go toCode Snippets » Libraryin your WordPress admin dashboard.
Search for ‘Set oEmbed Max Width’ and hover over the matching result.
Click on ‘Use Snippet’ to proceed.
WPCode will direct you to the ‘Edit Snippet’ page, where everything is pre-configured for your convenience.
You will see the following pre-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 pixels and the maximum height to 280 pixels. Remember to customize the height and width attributes as needed.
Finally, toggle the ‘Inactive’ slider to ‘Active.’ Then, click the ‘Save Snippet’ or ‘Update’ button to activate the code snippet.
Method 4: Using CSS to Set Max Width for Specific Embed Types
By default, WordPress automatically applies CSS classes to various sections of your site.
It also assigns several CSS classes to embed blocks, which you can use to set a maximum width for embeds on your WordPress blog.
This option is ideal for setting a maximum size for specific types of embeds, such as Tweets. It also enables you to establish a maximum size for all types of embedded content.
To identify the necessary CSS classes to target, simply embed content in a post or page and preview it in your web browser.
Next, hover your mouse over the embedded content and right-click. From the menu that appears, select the ‘Inspect’ option.
This action opens a new panel displaying all the CSS classes that WordPress has applied to the embedded content. You can utilize these classes to define a maximum width for that particular embed.
To specifically target an oEmbed provider, you will generally use .wp-block-embed-providername, so make sure to look for this class in the panel.
For instance, in the image below, we have highlighted the .wp-block-embed-providername class. Additionally, we can see a .wp-block-embed-pinterest class on this line.
You can set a maximum width specifically for Pinterest embeds by using the .wp-block-embed-pinterest class.
For example:
.wp-block-embed-pinterest { max-width: 900px!important;
}
Please note that you might need to change .wp-block-embed-pinterest to a different CSS class based on the specific content you want to target.
To set a maximum width for all embedded content, you can use the following code snippet:
.wp-block-embed { max-width: 900px!important;
}
The simplest way to add custom CSS to your website is by using WPCode. Just create a new custom snippet following the same steps mentioned earlier.
This time, open the ‘Code Type’ dropdown and select ‘CSS Snippet.’
You can save and publish this snippet in the same way you make any WPCode snippet live.
Once completed, WordPress will apply this value as the maximum size for your embedded content.
Bonus Tip: Easily Integrate Your Social Media Feeds into WordPress
If you frequently embed content from social media platforms, you can save significant time and effort by using Smash Balloon.
Smash Balloon is the top social media plugin for WordPress, enabling you to effortlessly add your social media feeds to your WordPress site.
This feature supports all major social media platforms, allowing you to easily embed videos from YouTube, Twitter, Instagram, and TikTok.
Crucially, Smash Balloon is designed to be mobile-responsive and compatible with any WordPress theme, ensuring that your embedded content always appears visually appealing.
We hope this article has helped you understand how to set a maximum width for oEmbed in WordPress. You might also find our guide on embedding iFrame code in WordPress useful, as well as our expert comparison of the top live chat software for small businesses.
If you enjoyed this article, consider subscribing to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
