Lazy YouTube Player

Project Overview 🔍

Lazy YouTube Player is a lightweight, customizable YouTube player. It provides a simple way to embed YouTube videos with lazy loading capabilities, improving your website’s performance.

Features ✨

• Lazy loading of YouTube videos using Intersection Observer API
• TypeScript support for improved developer experience
• Customizable player options (thumbnail, play button, etc.)
• Accessibility improvements with ARIA attributes
• Responsive design
• Error handling for invalid video IDs or API failures

Installation 📦

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/lazy-youtube-player@v0.3.0/yt-player.min.js"
  defer
></script>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/lazy-youtube-player@v0.3.0/yt-player.min.css"
/>

Usage 🚀

Here’s a basic example of how to use the Lazy YouTube Player in a website:

<div class="NexosYt" data-embed="YT_VIDEO_ID"></div>

optional: data-thumbnail="CUSTOM_THUMBNAIL_URL"

API

The LazyYouTubePlayer component accepts the following props:

• NexosYT (string, required): The YouTube Player Class.
• videoId (string, required): The YouTube video ID.
• thumbnailUrl (string, optional): Custom thumbnail URL. If not provided, the default YouTube thumbnail will be used.
• width (number, optional): The width of the player. Default: 640.
• height (number, optional): The height of the player. Default: 360.

Created with ❤️ by @nexoscreator

⭐ Star us on GitHub!