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
Follow these steps to set up Lazy YouTube Player on your machine.
- Add the script to your HTML file:
<script type='module'
src="https://cdn.jsdelivr.net/npm/[email protected]/yt-player.min.js"
defer
></script>- Add the stylesheet to your HTML file:
<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>💡 You can also customize thumbnail data-thumbnail="CUSTOM_THUMBNAIL_URL", its optional.
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.
We ❤️ contributions! Follow these steps to contribute:
- 🍴 Fork the repository
- 🌿 Create a new branch (
git checkout -b feature/AmazingFeature) - 💾 Commit your changes (
git commit -m 'Add some AmazingFeature') - 🚀 Push to the branch (
git push origin feature/AmazingFeature) - 🔃 Open a Pull Request
📖 See our Contribution Guidelines for more details.
This project is licensed under the MIT License. See the LICENSE file for details.
💬 Join us on Discord: Click Here
🐦 Follow on Twitter: @nexoscreator
📧 Email: [email protected]
Created with ❤️ by @nexoscreator