Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Easily Add Lazy Loading for Videos in WordPress

Videos are great for improving user engagement on your website. However, one downside of embedding videos is that it slows down your website. In this article, we will show you how to add lazy loading for videos in WordPress and improve your page speed.

How does Lazy Loading for Videos Work?

Lazy Loading for Videos

Wondering what exactly is lazy loading, and how does it work?

When you embed a video on your site, you add additional external scripts and files that needs to be loaded. Since there is more to load, your website loads slower.

Video lazy loading replaces the embedded Youtube and Vimeo videos with a clickable preview image. When your visitors click on the image, it loads and play the video.

Since images are a lot smaller in size than videos, the lazy loading technique significantly improve page speed.

Now that you know the advantages, let’s take a look at how to lazy load YouTube and Vimeo videos in WordPress.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

How to Add Lazy Loading for Videos in WordPress

First thing you need to do is install and activate the Lazy Load for Videos plugin.

This plugin works out of the box, and you do not need to edit any lazy loading jQuery scripts or any code for that matter.

To see that your lazy loading is working, all you need to do is view a post or page that contains a YouTube or Vimeo video. You will notice that the default players are replaced by a video thumbnail and a play button.

A lazy load video with thumbnail and play button

When you click on the image, it will load the video and play it.

There might be a slight second (negligible) delay in loading the video, so please don’t think that the lazy loading is not working.

Even though this plugin works out of the box, there are still settings which you can configure based on your needs.

On the post editor screen, you can choose the thumbnail quality for YouTube video embeds.

Controlling YouTube thumbnail  quality for posts and pages

Aside from the thumbnail quality, there are further customization options available if you head over to Settings » Lazy Load for Videos.

Settings page for lazy load for videos WordPress plugin

On the general settings tab, you can customize the appearance of the video thumbnails. You can enable responsive mode, choose play button style, use custom CSS, and even enable schema.org markup.

This plugin supports both YouTube and Vimeo. You can find provider specific settings by clicking on the respective tabs.

On the YouTube tab, you can choose colors, thumbnail quality, disable related videos and annotations, etc. You can even disable lazy load for YouTube videos.

Lazy load for YouTube settings

Similarly, on the Vimeo settings tab you can choose control colors, hide or display video title, and disable lazy load for Vimeo videos.

Lazy load for Vimeo

That’s all. We hope this article helped you add lazy load for videos in WordPress.

To further boost your website’s speed you will need to setup a WordPress CDN solution with W3 Total Cache plugin.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

7 CommentsLeave a Reply

  1. Please update this article! I’m having a lot of trouble finding up to date information on how to achieve this :(

  2. What happens if you want to be playing your youtube videos in popups instead of on the page itself. Can you still use this plugin?

  3. I am running chrome with the pintrest plugin under linux and the video will not play. Even loading the image into a 2nd tab will not work. I am going to disable the plugin and see if the video will work. And negative, the video will still not play.

  4. Hi there I have a question about WordPress conditional tag. in my template displaying tags in post footer on WordPress homepage. So How to hide tags on home page. And display only on post page. Thanks in advance.

Leave a Reply to John Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.