If you have been keeping your WordPress website updated and are running WordPress 5.0 or above the likelihood is that you are using the new Gutenberg editor. ThriveWP spotted a rather annoying problem recently with the editor which meant our youtube embeds were not responsive. The result of this was ugly and we couldn’t take it any longer.
A little bit of research later and we found out why responsive Youtube embeds for WordPress were not working as expected. It
Gutenberg editor or theme issue?
As mentioned above it is a Gutenberg function but the underlying issue as to why Responsive Youtube Embeds in WordPress don’t work properly is more to do with the fact your theme is not calling that function specifically. In the video below we show you how to fix this with one simple line of code.
How to fix embedded youtube videos in WordPress
If you are looking to change the size of embedded youtube videos in WordPress them please read on. It’s actually very simple to ensure your youtube video embeds display correctly in WordPress. All it takes is a small line of code which we will add below, all you need to do is copy and paste!
Firstly you will need to login to the WordPress admin dashboard, then you need to click Appearance > Theme Editor. You should now see a list of files on the right that make up your theme. In that
Once you have found that file you need to click on it. The file should then load in the editor window. Scroll to the bottom of the file then copy and paste the below code into the file.
add_theme_support( 'responsive-embeds' );
Now that you have copied this code you need to save the file and also if you use a caching plugin on your site clear the cache.
Go and refresh your post that contains the embedded youtube video and tada all fixed! You are most welcome.
Using the new Gutenberg embed blocks
Embedding your youtube video into WordPress is actually very simple, you can either just paste the URL of the video into your post or you can add the youtube block and paste the URL into that block then click embed.
Gutenberg the new editor for WordPress actually supports many different kinds of embeds from video to Twitter and more. For video specifically, WordPress supports 32 services for quick embeds. This means you can simply paste the URL of the video into your post in WordPress and it will display the video automatically. For other services not in this list you will have to add the embed code manually. Below or the 32 supported services.
- Speaker Deck
If you want to add
To do this click the + icon in the top left of your editor screen to bring up the block list then search HTML. You should now see the HTML block. Click on it to add it to your posts, now you just need to paste the embed code from your video service into the HTML code block. Once you have saved or published your post your video should display on the frontend of your website.
WordPress Video Embed Plugins
Although you do not need a plugin to embed youtube videos you may find the following plugins useful. They add additional functionality specifically around video and youtube embeds.
1. Lazy Load Videos
Every image and video you add to a page will add to its loading time. Video although hosted on youtube will still need to make those calls to youtube to get the video. By using Lazy Load videos you will save on loading time and keep your visitors happy.
The plugin works by only loading a clickable image rather than the whole video
2. Youtube Gallery pages
Ever wanted to have a WordPress page display all your videos or create a gallery page of videos?
It gives you many options but one of those is to create video gallery pages of your channel or playlist, it also gives you some display options like grid layout. You can also set it to play through each video one after the other in order of the videos on your page.
3. Video Gallery – YouTube Gallery
Another great youtube video gallery plugin is Video Gallery – YouTube Gallery. They boast a fully responsive experience and you can see some demos of their plugin in action before you try it.
The Plugin is designed to be shown clearly and neatly on any screen size. No matter how small your device screens are it will automatically adjust to fit on those screens and display perfectly.Total-Soft
4. WP Video Lightbox
Want to make your videos stand out a bit? A lightbox effect might be just up your street! Lightbox is those popup style boxes you see when clicking an image or video on a website. You know the ones that bring the media you clicked on front and
Lightboxes are great to bring focus to one specific element like a video meaning there are no other distractions for the viewer. WP Video Lightbox does just this
The WordPress Video Lightbox plugin allows you to embed videos on a page using lightbox overlay display.Tips and Tricks HQ, Ruhul Amin
This plugin can be used to display images, flash, YouTube, Vimeo, iFrame etc in a lightbox overlay. The embedded videos can be viewed on iPhone and iPad too.
We hope you found this post helpful in fixing your responsive youtube embeds in WordPress, Don’t forget to subscribe to our Youtube channel for more helpful videos and WordPress Tutorials.