Fix Responsive WordPress Embed For Youtube

18th March 2019

WordPress Maintenance Services How to fix responsive youtube embeds in WordPress

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. Read on to find the solution to WordPress youtube embeds not working.

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 which means no WordPress responsive video for you! Luckily we have a solution.

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. You may have been playing with different classes like wp-block-embed-youtube to fix this without any luck. Below we will show you how to fix the WordPress responsive youtube embed with one simple line of code. Of course, if you don’t have time for this or want someone to sort this kind of thing out for you then you may want to look at our WordPress Care Plans. With our plans, we will manage your site for you including any issues like this. Watch the video below to find out how to enable WordPress responsive video.

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

Gavin is the guy behind the award-winning ThriveWP. He has over 18 years of experience creating, developing, hosting 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 on FacebookLinkedin or Twitter.

Share this article

Subscribe to receive articles right in your inbox

Get Your Free Guide On Keeping Your WordPress Website Safe

Subscribe to learn how to keep your WordPress website safe, starting with this free guide. Unsubscribe with one click at any time.

We hate SPAM and promise to keep your email address safe. Here’s our privacy policy.

SEND ME MY FREE EBOOKS!​

Three amazing products that will enhance your website performance, ranking and maximise your income! Our eBook offer includes three eBooks in one bundle.

We hate SPAM and promise to keep your email address safe. Here’s our privacy policy.