Faster Page Loads: Lazy Load YouTube Videos With NexosYT

NexosYT is a lightweight JavaScript library that helps you lazy load YouTube videos to enhance page load times and user experience.

Imagine a webpage filled with YouTube videos. Without lazy loading, all those videos would try to load at once. This slows down your page, especially on slower connections. It also impacts user experience.

This library solves this by loading YouTube videos only when needed. A user clicks the play button and the actual video player loads.

How to use it:

1. Add the NexosYT JavaScript and Stylesheet files to your HTML.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nexoscreator/[email protected]/yt-player.min.css">
<script type='module' src="https://cdn.jsdelivr.net/gh/nexoscreator/[email protected]/yt-player.min.js" defer></script>

2. Add the following HTML code where you want your YouTube video to appear. Don’t forget to replace Your Youtube Video ID with the actual YouTube video ID.

<div 
  class="NexosYt" 
  data-embed="Your Youtube Video ID">
</div>

3. Add a custom thumbnail to the player.

<div 
  class="NexosYt" 
  data-embed="Your Youtube Video ID"
  data-thumbnail="/path/to/thumbnail/">
</div>

How it works:

1. The script first selects all elements with the class “NexosYt” on the page.
2. For each element, it extracts the YouTube video ID from the “data-embed” attribute.
3. It then creates a thumbnail image using the YouTube API and appends it to the element.
4. A play button SVG is also created and inserted into the element.
5. When the user clicks on the play button, the script dynamically creates an iframe element and replaces the thumbnail and play button with the embedded YouTube video.

Changelog:

v0.1.0 (01/05/2024)

• Added: Support for custom thumbnails
• Added: Accessibility improvements with ARIA attributes
• Added: Error handling for invalid video IDs and API failures
• Improved TypeScript support