https://github.com/nexoscreator/lazy-youtube-player
This enables lazy loading of YouTube videos with a customizable play button and smooth transitions, enhancing page load times and user experience.
https://github.com/nexoscreator/lazy-youtube-player
css javascript lazy lazy-loading youtube-player
Last synced: 3 months ago
JSON representation
This enables lazy loading of YouTube videos with a customizable play button and smooth transitions, enhancing page load times and user experience.
- Host: GitHub
- URL: https://github.com/nexoscreator/lazy-youtube-player
- Owner: nexoscreator
- License: mit
- Created: 2024-08-08T02:20:54.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-22T16:22:35.000Z (5 months ago)
- Last Synced: 2025-04-04T15:53:10.467Z (3 months ago)
- Topics: css, javascript, lazy, lazy-loading, youtube-player
- Language: TypeScript
- Homepage: https://nexoscreator.github.io/lazy-youtube-player/
- Size: 28.5 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
## 🎥 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
Follow these steps to set up **Lazy YouTube Player** on your machine.
1. **Add the script to your HTML file:**
```html
```
2. **Add the stylesheet to your HTML file:**
```html
```
---
## 🎯 Usage
Here's a basic example of how to use the Lazy YouTube Player in a website:
```html
```
💡 _You can also customize thumbnail `data-thumbnail="CUSTOM_THUMBNAIL_URL"`, its optional._
---
## 🔗 Useful Links
[](https://nexoscreator.github.io/lazy-youtube-player)
[](https://github.com/nexoscreator/lazy-youtube-player)
[](https://youtu.be/L7UPOsBBW5Q)
[](https://www.npmjs.com/package/lazy-youtube-player)
---
## 🧠 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](CONTRIBUTING.md) for more details._
---
## 📄 License
This project is licensed under the **MIT License**. See the [LICENSE](LICENSE) file for details.
---
## 📬 Contact & Community
💬 Join us on **Discord**: [Click Here](https://discord.gg/H7pVc9aUK2)
🐦 **Follow on Twitter**: [@nexoscreator](https://twitter.com/nexoscreator)
📧 **Email**: [[email protected]](mailto:[email protected])
Created with ❤️ by @nexoscreator