Youtube Lazy Load

How to Use It

1. Add the youtube-lazy-load.js script to your web document

   <script src="https://cdn.jsdelivr.net/gh/alterebro/youtube-lazy-load/src/youtube-lazy-load.js"></script>

2. Create any link to your YouTube Video with the data-youtube-lazy attribute

   <a href="https://www.youtube.com/watch?v=xa_zPPsMMgo" data-youtube-lazy>YouTube Video</a>

3. Done! Your YouTube Videos will now lazy load. In the case that JavaScript isn't enabled on the browser, a link to your YouTube video will display.

Example

<a href="https://www.youtube.com/watch?v=xa_zPPsMMgo" data-youtube-lazy>Barcelona Sants Timelapse Video</a>

Barcelona Sants Timelapse Video

When a YouTube video is embedded using its iframe embed code, the browser typically loads the video player and all associated scripts and resources immediately, regardless of whether the video is actually visible on the screen. This can lead to unnecessary overhead and slower page loading times, defeating the purpose of lazy loading.

Using as example this page itself which has 3 YouTube videos embedded, here's the difference of data load using the youtube-lazy-load or not.

Iframe embedding without the script

62 requests / 3.5 MB transferred / 11.3 MB resources / Finish: 3.51 s

Using the youtube-lazy-load script

4 requests / 31.6 kB transferred / 31.1 kB resources / Finish: 134 ms

How It Works

This script facilitates the lazy loading of embedded YouTube videos on a webpage. Here's a general overview of what it does:

1. Initialization It waits for the DOM content to be fully loaded before executing the script.
2. Unique Identifier Generation It generates a unique identifier for the lazy-loaded YouTube elements to avoid conflicts with other elements on the page.
3. Styling It defines CSS styles for the lazy-loaded YouTube elements, including setting a placeholder background color and position, and adding a play button overlay.
4. Thumbnail Generation It generates a thumbnail image URL for each YouTube video using the video's ID.
5. iFrame Creation It creates an iframe element for each YouTube video, setting attributes such as the video's source URL, title, and various permissions.
6. Lazy Loading Trigger It listens for clicks on elements marked with a specific attribute (data-youtube-lazy) that signify they should trigger lazy loading of the associated YouTube video.
7. Replacement of Placeholder with iFrame When the trigger element is clicked, it replaces the trigger element with the generated iframe containing the YouTube video.
8. Intersection Observer It employs the Intersection Observer API to detect when lazy-loaded YouTube elements become visible in the viewport. Upon intersection, it sets the background image of the element to the thumbnail URL.

Overall, this script allows YouTube videos to be loaded on demand, improving page load performance by deferring the loading of video content until it's necessary, and also optimizing bandwidth usage.

Misc

Now I'll fill the page with some content in order to check whether the loading lazyness of the video preview images below are working or not... This an be seen on the Browser Developer Tools (Network Tab).

(Scroll Down...)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue eros, eleifend ultricies augue eu, ultrices posuere arcu. Quisque ultrices posuere lectus, nec efficitur dui venenatis quis. Nam in tempus neque. Sed eu dui mi. Etiam euismod eget nisi eu convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non condimentum risus. Aenean malesuada nulla diam, at consectetur libero condimentum sed. Nunc vitae sagittis tortor. Maecenas lacus ex, viverra ut lacus eget, commodo tristique velit. Aenean dictum tincidunt aliquam. Nullam pretium nisi urna, eu lobortis risus dapibus vitae. Donec accumsan pretium pulvinar. Quisque non massa ullamcorper, tincidunt neque vitae, semper erat.

Donec ut magna bibendum, bibendum eros vitae, imperdiet nisl. Maecenas commodo ex sit amet elit ornare convallis. Morbi risus augue, maximus non dignissim suscipit, vulputate vel velit. Morbi mattis felis vel efficitur rutrum. In interdum justo vitae neque pretium facilisis. Curabitur ac lacus ante. Integer ut cursus purus. Etiam ut bibendum lacus. Nam ullamcorper urna et neque egestas, ac auctor mauris porta. Fusce maximus, est quis dignissim ullamcorper, nibh lorem facilisis orci, a rhoncus nunc diam in nibh. Vivamus eros quam, tincidunt a risus eu, consequat vestibulum tortor. Ut vel condimentum augue. Cras maximus, ante at consequat volutpat, nisi velit consectetur arcu, eu sodales sapien nibh in sem. In fermentum odio sed est dictum, sit amet pulvinar elit luctus.

Two [div/] elements in the fight of reaching the infamous z-index:99999; / CSS animation

Some extra bogus content below plus another lazy loaded YouTube Video embedded. (Scroll Down...)

Nam orci arcu, semper in libero quis, pellentesque faucibus nisi. Aenean posuere aliquet elementum. Nunc gravida tellus id arcu accumsan semper. Aenean mauris purus, lobortis a tristique non, semper sed dolor. Cras ornare pulvinar nulla. Duis tristique eros vel urna scelerisque malesuada. Proin id venenatis nisl.

Sed et feugiat ipsum. Aliquam erat volutpat. Nulla eget sem sed enim mattis egestas. Nunc vitae orci at nibh feugiat convallis. Morbi vel augue sit amet nunc faucibus faucibus. Nullam sed felis nec mi aliquam ullamcorper. Pellentesque eget nulla orci. Mauris eget augue aliquam, aliquam nulla eget, euismod mi. Cras quis tincidunt ligula, at condimentum urna. Vivamus gravida rutrum lorem, ut consequat leo pulvinar id.

Fusce ornare justo eu mi luctus finibus. Fusce fringilla, mauris vel placerat sollicitudin, velit nibh tincidunt tortor, eu placerat quam est sit amet nunc. Nunc ornare id mi a posuere. Praesent id nulla commodo, ornare metus a, lobortis enim. Proin cursus est laoreet risus suscipit eleifend. Proin blandit metus in massa convallis semper. Nam id rhoncus nulla. Sed convallis elit lorem, sit amet pulvinar nisl semper at. Aliquam eget lacus est.

Retour et Tour Video on YouTube