fbpx

Fix Responsive WordPress Embed For Youtube

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 WordPress embeds for Youtube video 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 WordPress Youtube embeds were not working as expected. It turns out the majority of themes even updated ones do not call the responsive embeds theme support.

Gutenberg editor or theme issue?

As mentioned above it is a WordPress Gutenberg function but the underlying issue as to why Responsive WordPress Youtube Embeds 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 WordPress youtube video embeds display correctly. 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 list, you need to look for the functions.php file.

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.

WordPress Embed Youtube

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.

  • Amazon
  • Animoto
  • Cloudup
  • CollegeHumor
  • Crowdsignal
  • Dailymotion
  • Facebook
  • Flickr
  • Hulu
  • Imgur
  • Instagram
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Someecards
  • SoundCloud
  • Speaker Deck
  • Spotify
  • TED
  • Tumblr
  • Twitter
  • VideoPress
  • Vimeo
  • WordPress.tv
  • YouTube

If you want to add video that is not on one of these services then you will need to use the HTML block in Gutenberg to add your videos embed code.

Custom embed code WordPress

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 Youtube 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

By loading the videos only when the user clicks on the preview image – using jQuery –, no unnecessary JavaScript is loaded. Especially on sites with many embedded videos, this will make your visitors happy.

Lazy Load for Videos

2. Youtube Gallery pages

Ever wanted to have a WordPress page display all your videos or create a gallery page of videos? With The Youtube plugin by EmbedPlus Team, you can!


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 center and blur out the rest of the page.

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.
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.

Tips and Tricks HQ, Ruhul Amin

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.

Need WordPress help or support get in touch.

Like our posts? Why not find out about other website platforms. Take a look at our WordPress vs Wix comparison


Gavin Pedley

Gavin Pedley is the guy behind ThriveWP. He has over 12 years experience in running and maintaining large online forums such as the WindowCleaningForums.co.uk, managing servers, creating, developing and managing WordPress websites. Gavin regularly shares his expertise via the ThriveWP blog and Youtube channel, where he creates informative and helpful WordPress tutorial videos. Connect with Gavin at Facebook, Linkedin or Twitter.

Subscribe to our newsletter

You may also like...