Embedding YouTube videos or social media posts in WordPress is very easy, thanks to its oEmbed feature.
But if you don’t set the maximum width of these videos, your website design can look bad especially on mobile phones.
This guide will show you 4 easy ways to set the maximum width of oEmbed Max in WordPress, so that your site always looks good and mobile-friendly.
Want to stay ahead with AI-driven in WordPress insights and stay updated with the latest trends? Subscribe for daily search insights at wpguidepro.com to improve your WordPress strategy.
Table of Contents
Why Fix the OEmbed Maximum Width in WordPress?
oEmbed Max is a simple WordPress feature that pulls content from websites like YouTube, Twitter, Vimeo and displays it on your site. You don’t have to do any coding.
But sometimes the content is so big that it ruins the website design especially on mobile or in some themes.
Common problems that occur when there is no width control for the embed:
• The design looks bad: the video or post goes out of the layout.
• It is difficult on mobile: scrolling is difficult or some part of the video gets cut off.
• Website runs slow: Big and heavy videos do not load quickly, this spoils SEO and user experience.
But if you set a maximum width, then these problems can be removed and your content fits well into the site design.
Method 1 Using the Embed Shortcode (Best for YouTube Videos)
Embed shortcode is a simple way in WordPress to control the width and height of a video (like YouTube).
Step-by-step guide:
Open the Post or Page Editor in your WordPress site.
Where the video is displayed, paste the following code:
[embed width="600" height="400"]https://www.youtube.com/watch?v=xyz123[/embed]You can change the width and height according to your needs.
Why use this method?
• It is very easy, no plugin is needed.
• You can set different size for each video.
• This is best when you need different size for each video.
But remember: This method works only for one video. If you want the size of all videos to be fixed automatically, then see the next method
Method 2 Using the Built-in WordPress Embed Blocks (Easy)
WordPress’s Gutenberg editor gives you Embed blocks with which you can easily embed videos or posts and they look good even on mobile.
Steps to set max width:
- Open Gutenberg Block Editor in your post or page.
- Click on the + icon and search for Embed and add the block.
- In that block, paste the link of the content that you want to embed (such as YouTube or Vimeo link).
- Go to the Block settings panel on the right side and see the option of width or alignment. Set the maximum width from there.
Advantages of this method:
• It is very easy, no coding is required.
• Videos like YouTube become auto responsive.
• Works smoothly with more services.
But remember one thing: If you want advanced design control then you will have to use CSS or PHP
Method 3 Using Custom PHP (Set a Max Width for All Embeds)
If you are comfortable using a little code, you can set the maximum width for all videos and posts by adding a small coding line to your WordPress theme file.
How to do it:
Go to your WordPress dashboard, then click on Appearance > Theme Editor.
Open the functions.php file of the theme you are using.
Paste the code given below in that file:
function customoembedmaxwidth() {
return 600; // Yahan par "600" ki jagah apni width likh lo
}
add_filter( 'embed_defaults', 'customoembedmaxwidth' );Save the file and refresh your website.
Pros of this method:
- The size of every embed will be the same (global solution).
- There is no need for any plugin.
Disadvantages (cons):
- You have to edit the theme file – this can be difficult for beginners.
- If there is a mistake in the code, the site can go down temporarily. it is important to take a backup first.
Method 4 Using CSS (Set Max Width for Specific Embed Types)
If you want to change the design of the website from the front side (front-end), then you can control the size of embeds like YouTube or Twitter using CSS.
How to do it:
- Go to your WordPress dashboard.
- First click on Appearance > Customize > Additional CSS.
Paste the CSS code below there:
.wp-block-embed {
max-width: 600px; /* Jitna chaho, itna width rakh lo */
margin: 0 auto; /* Embed ko center mein dikhata hai */
}
iframe, object, embed {
max-width: 100%;
height: auto;
}iframe, object, embed { max-width: 100%; height: auto; } After that click on Publish so that the changes are saved.
Advantages of this method:
- You only change the style of the embed, not the core file of the theme.
- Your website will look good on every device (mobile, tablet).
With CSS you have more control over the look.
Bonus Tip – How to Easily Add Your Social Media Feeds to WordPress
Do you want to make your website even better and more modern? Then it is a good idea to display your social media posts like Instagram, Facebook or Twitter on your website.
You can use tools like Smash Balloon or Social Feed Gallery.
These plugins work easily with WordPress and display your social media posts on your website in a nice and responsive (mobile-friendly) style.
These tools combine with the embedded content of your website to give it a clean and stylish look.
Ensure a Perfectly Embedded Experience
With these four methods, setting the maximum width of oEmbed max content in WordPress has now become very easy. Whether you are a beginner who uses Embed blocks, or an expert developer who makes changes in PHP code, there is a way for everyone.
Remember, good and responsive embeds make your website beautiful and also improve SEO and user experience. Adjust your oEmbed max settings today and give your users a better experience
