Do you want to set the width of oEmbeds in WordPress? WordPress easily integrates third-party content like YouTube videos, Tweets, and Facebook updates. However, the embeds might get too large at times, producing layout issues on your website.”We’ll show you how to adjust the oEmbed max-width in WordPress so you have greater control over the layout of your site in this tutorial.”
Why does WordPress need to fix the OEmbed Max Width?
WordPress allows you to automatically incorporate content from third-party websites into your posts and pages using the oEmbed technology. Using this strategy, you may instantly integrate YouTube videos, Facebook posts, tweets, and a number of other types of information on your website. This material is not hosted on your WordPress website. Rather, it originates from these third-party websites. WordPress does a good job of adjusting the width of embedded content to the main or sidebar areas of your website. However, in rare circumstances, such as the one shown below, the embedded information may be excessively huge and overflow the content sections of your page. To remedy this, you’ll need to tell WordPress to use a maximum width restriction for third-party embeds. Unfortunately, under the WordPress settings, there is no method to do so.
Let’s look at how to establish the oEmbed maximum width in WordPress without causing any problems.
We’ll go through four different ways, and you may choose the one that best suits your needs:
- You may modify the width of oEmbed using a WordPress shortcode.
- Using CSS, set the maximum width for oEmbed.
- With the WordPress Embed Block, you can customise the width of oEmbed.
- You may specify the maximum width for oEmbed using the WordPress filter (Code Method).
Method 1: In WordPress, use the Embed Shortcode
Setting a maximum width for video embeds in WordPress is much easier with this solution.
Instead of copying the URL or using the YouTube block, you’ll use the shortcode block. The width and height parameters must be provided using the embed shortcode.
“”Feel free to experiment with the width and height settings, and substitute your own embed URL.””
Replace the embed URL with your own and play about from the width and height settings.
For some oEmbed providers, the embed shortcode and associated width and height parameters do not work. For example, you can’t use it in WordPress to change the height and width of a Giphy embed.
In that case, you might want to try one of the alternatives listed below.
Method 2: Use WordPress Embed Blocks
Multiple embed blocks for various oEmbed service providers are offered in the WordPress editor. They may be used to add material to your posts and pages in a variety of ways.
You can also acclimate the alignment of the bed and set the content range to wide or full range in some of these blocks.
You can use these options to determine if the embed’s maximum width issue is resolved.
Method 3: In WordPress, use CSS to set the max width for embeds
WordPress automatically applies CSS classes to various places of your posts and pages by default.
It also offers a number of CSS classes to embed blocks. You may choose to use these CSS classes to specify a maximum width for embeds on your Web site.
“All you must do is bed the contents in a post or runner, also exercise it in your cybersurfer to see which CSS classes you need to target.” Select the Inspect tool by right-clicking on the embedded material with the mouse.
Every CSS class added to the embedded element will be displayed. For this type of embed, these classes can be used to determine a maximum width.
“”For example, you might use the custom CSS below to define a maximum width for all embeds.
You may also usethe.wp- block- bed-providername class to target certain oEmbed providers usingthe.wp- block- bed-providername class.” You might use the custom CSS below to establish a maximum range for only Pinterest embeds, for illustration.
Method 4: Set the oEmbed Max Width using the WordPress Filter
This solution necessitates the addition of custom code to your WordPress website. We’ll use this way to set the default width for oEmbeds by adding our own code to WordPress. Simply paste the following code into the functions.php file of your theme or into the Code Snippets plugin.
Remember to change the height and width properties to fit your needs.
The trouble with this approach is that it only uses the width property if the embedded content doesn’t either. This method may not work if the embed code already includes width.