How to Easily Add Lazy Loading for Videos in WordPress

Videos are awesome for boosting user engagement on your website. But embedding them can make your site load slower, which isn’t great for visitors.

One way to fix this is by using lazy loading for your videos.

Lazy loading helps your site load faster by only loading videos when they come into view. This means your page doesn’t get bogged down by loading all videos at once. It’s a simple trick that can improve your site’s performance.

In this guide, we’ll show you how to easily add lazy loading for videos in WordPress.

What Is Lazy Loading and How does Lazy Loading for Videos Work?

Lazy loading is a technique that delays the loading of non-essential elements on a webpage until they are needed. For videos, this means they only load when they come into view.

When you embed a video on your site, additional external scripts and files need to be loaded. This extra load can negatively affect your website performance.

Video lazy loading helps by replacing embedded YouTube and Vimeo videos with a clickable preview image. When visitors click on the image, the video loads and plays.

Since images are much smaller in size than videos, the lazy loading technique significantly improves page speed.

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

Video Tutorial

Subscribe to WPBeginner

If you prefer written instructions, then continue reading.

How to Add Lazy Loading for Videos in WordPress

To add lazy loading for videos, the 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 code.

And to see if 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 a video thumbnail and a play button replace the default players.

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

You might notice a quick second of delay when the video loads, but that’s totally normal. Don’t worry; lazy loading is working just fine.

Now, do note that even though this plugin works out of the box, there are still settings that you can configure based on your needs. On the post editor screen, you can choose the thumbnail quality for YouTube video embeds.

Aside from the thumbnail quality, there are further customization options available.

You can head over to Settings » Lazy Load for Videos to check and readjust these options.

On the ‘General/Styling’ tab, you can customize the appearance of the video thumbnails. You can enable responsive mode, choose the 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 a progress bar color, disable cookies, hide annotations, and more. You can even disable lazy load for YouTube videos.

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

If you made any changes to these settings, don’t forget to click the ‘Save Changes’ button at the bottom so you don’t lose your progress.

Bonus Tip: Never Upload Videos on WordPress

Before diving into why you should avoid uploading videos to your WordPress site, let’s clarify the difference between uploads and embeds.

Uploading a video means storing the video files directly on your site, similar to how you store images in the WordPress media library. We strongly advise against this.

On the other hand, embedding a video involves first uploading it to a third-party site like YouTube. You then embed the video on your blog, allowing it to be viewed on your website while stored elsewhere. We strongly recommend embedding videos whenever possible.

To learn more about the benefits of embedding instead of uploading videos to WordPress, then you can refer to our guide on why you should never upload a video to WordPress.

We hope this article helped you add lazy load for videos in WordPress. Next, you might want to check out our ultimate guide to WordPress speed and performance or how to set up a WordPress CDN solution to boost your website speed.

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