NexosYT - Lazy YouTube Player 🎥

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/gh/nexoscreator/[email protected]/yt-player.min.js"
  defer
></script>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/nexoscreator/[email protected]/yt-player.min.css"
/>

Usage 🚀

Here's a basic example of how to use the Lazy YouTube Player in a React application:

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

optional: data-thumbnail="CUSTOM_THUMBNAIL_URL"

Links 🔗

API

The LazyYouTubePlayer component accepts the following props:

• 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.
• autoplay (boolean, optional): Whether to autoplay the video when loaded. Default: false.

Contributing 🤝

Contributions are welcome! If you have any suggestions, bug fixes, or improvements, feel free to open an issue or submit a pull request.

Please check the CONTRIBUTING.md file for more details.

License 📄

This project is licensed under the MIT License - see the License file for details.

Support 💖

If you like this project, please consider giving it a ⭐ on GitHub and sharing it with your friends!

Created with ❤️ by @nexoscreator