How to “Lazy Load” Embedded YouTube Videos

In this tutorial I’ll explain how to “lazy load” multiple embedded YouTube videos. Doing so will improve the performance of our initial page load, and hand some power over to the user.

Lazy Loading

Embedding a Youtube video has become a completely normal process for anyone involved with the web; copy, paste, done. However, pulling in an external resource like a Youtube video may slow down a web page’s load performance, especially if there are two or more videos embedded on the same page.

By embedding videos we request more than just a video file. A number of resources are fetched, including JavaScript files, a stylesheet, images, and advertisements. And as you can from the screenshot below, two Youtube videos equates to 22 HTTP requests with a total of 624kb downloaded. These numbers will climb as we embed more videos on the page.

Total number of HTTP requests made when embedding two videos

So, instead of loading the Youtube video as soon as the page loads, we are going to pull and play the video when the user asks to do so. This method is popularly known as lazy loading–it will minimise the HTTP requests on initial page load, and ultimately improve the page’s performance.

Without further ado, let’s get started.

1. HTML Structure

We begin with building the HTML. This is straight forward; we’re using just two div elements. The first div will wrap around the embedded Youtube video, the second div is nested in the first div, and we’ll use it to shape the Play button to illustrate that this is a playable video.

As you can see from the above code, we will show sdstandard.jpg image, since most videos today come in Standard Definition (SD). Coming in at 640×480 pixels, this image thumbnail is just at the right size; not too small, nor too big. You may opt for the high-quality thumbnail image, maxresdefault.jpg, instead, but keep in mind that Youtube video do not always come in High-definition (HD), so this particular size may not always be available.

Loading Image Thumbnail Asynchronously

Loading the image thumbnail asynchronously will allow the page to load faster. In case we have two or more embedded Youtube videos, each image thumbnail of these videos will be loaded simultaneously so they don’t prevent the page rendering flow:

First, it attaches the click event to the wrapper div as well as execute the anonymous function attached.

Within the function we create an iframe element; we create a similar iframe that the Youtube generates to embed a video, except we now insert the autoplay=1 in the URL to immediately play the video when the iframe is set.

Lastly, it replaces the wrapper div content with the iframe.

We are all set. You can give the following demo a try!

Wrapping Up

In this tutorial, we learned how to load a Youtube video upon the user’s click. This is faster and a more bandwidth-efficient way than having to pull videos directly alongside page loading, especially if you have multiple videos embedded on a single page.

And as you can see from the following screenshot, we have made a significant improvement in term of the number of HTTP requests made during the initial page load. In this case, we have trimmed it down from 22 to 5 HTTP requests.

Next

In the next tutorial, we’ll improve our code by wrapping it as a “Web Component”. Doing so will allow us to embed the Youtube video more elegantly through a custom named element. Instead of adding two div elements as we did in this tutorial, we can simply add, for example, <youtube-embed>.