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

Follow these steps to set up Lazy YouTube Player on your machine.

1. Add the script to your HTML file:

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

2. Add the stylesheet to your HTML file:

<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>

💡 You can also customize thumbnail data-thumbnail="CUSTOM_THUMBNAIL_URL", its optional.

🧠 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.

🤝 Contributing

We ❤️ contributions! Follow these steps to contribute:

1. 🍴 Fork the repository
2. 🌿 Create a new branch (git checkout -b feature/AmazingFeature)
3. 💾 Commit your changes (git commit -m 'Add some AmazingFeature')
4. 🚀 Push to the branch (git push origin feature/AmazingFeature)
5. 🔃 Open a Pull Request

📖 See our Contribution Guidelines for more details.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

📬 Contact & Community

💬 Join us on Discord: Click Here
🐦 Follow on Twitter: @nexoscreator
📧 Email: contact@nexoscreator.tech

If you find this project helpful, please consider starring ⭐ the repository or sponsoring 💖 on GitHub!

Created with ❤️ by @nexoscreator