Share: How to Fix WordPress oEmbed Video Size Issue
Fix WordPress oEmbed Video Size Issue
WordPress 5.0 has a new block editor which is supposed to fix issues that a lot of people have had with the old editor as far as layouts and having more control. The new editor, also called Gutenberg, does this but it also adds a lot more headache to the mix when you push it to the limits.
We love to create videos and we add a video to every single blog post. The issue is the width of the video does not seem to apply when viewing the video on the front end of the site on certain templates.
The fix is to add a code snippet to add this support to the theme or template you are using.
Fix WordPress oEmbed Video Size Issue
Fix WordPress oEmbed Video Size Issue Directions
Adding the following code snippet into your WordPress site will add the responsive embedded content support for the whole site, not just one video.
We are using the Beaver Builder theme in our example but it works with any theme that has this issue.
Note: Make sure you are using a child theme when adding this code snippet into your site. The reason is if you add it to a parent theme and it updates it will wipe this out. If it is in the child themes functions.php file then it will remain.
- Click Appearance
- Click Theme Editor
- Note: You will receive a warning that this is not the best way to add code. Click I Understand
- Click the Functions.php file on the right side
- Add this line of code to the bottom of the functions.php file
- The first line is a comment and starts with two trailing slashes or //
- Note: if you press enter on your keyboard to create a new line WordPress automatically adds two lines “//” make sure the snippet does not have this in front of it or it will not work because it will be commented out.
// Responsive Video Theme Support
add_theme_support( 'responsive-embeds' );
What oEmbeds Can I Add to WordPress?
- Animoto Videos
- Blip Videos
- Cloudup Videos, Galleries, Images
- CollegeHumor
- DailyMotion Videos
- Facebook post, activity, photo, video, media, question, note
- Flickr Videos & Images
- FunnyOrDie.com Videos
- Hulu Videos
- Imgur Images
- Instagram Images
- Issuu Documents
- Kickstarter Projects
- Meetup.com Various
- Mixcloud Music
- Photobucket Images
- PollDaddy Polls & Surveys
- Reddit Posts & Comments
- ReverbNation Music
- Scribd Documents
- SlideShare Presentation slideshows
- SmugMug Various
- SoundCloud Music
- Speaker Deck Presentation slideshows
- Spotify Music
- TED Videos
- Tumblr Various
- Twitter Tweet, profile, list, collection, likes, Moment
- VideoPress Videos
- Vimeo Videos
- Vine Videos
- WordPress plugin directory Plugins
- WordPress.tv Videos
- YouTube Videos
This oEmbed list is from WordPress.org (link)
If this video is helpful please subscribe to our channel to stay up to date with more WordPress tutorials like this one. Click here to subscribe and click the little bell to be notified of new WordPress Tutorial videos.
Have a question? Ask on our free Facebook Community Group. We would love to help answer your questions.
WordPress Community & Help Group https://www.facebook.com/groups/pressavenue/
Share & Help Out the Community
[Sassy_Social_Share]
Posted in Code Snippet, WordPress Business, WordPress Tutorial, WordPress YouTube Tutorial Tags: Block Editor, Gutenberg
Let us know what you think of the How to Fix WordPress oEmbed Video Size Issue WordPress Tutorial. Feel free to ask a question or give your two-cents. Additionally, you can continue the discussion on our Free Facebook Group: "WordPress Tutorials & Community Help"