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.
- 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
<script type='module'
src="https://cdn.jsdelivr.net/npm/[email protected]/yt-player.min.js"
defer
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/yt-player.min.css"
/>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"
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.
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.
This project is licensed under the MIT License - see the License file for details.
If you like this project, please consider giving it a ⭐ on GitHub and sharing it with your friends!
Created with ❤️ by @nexoscreator