https://github.com/nexoscreator/lazy-youtube-player

NexosYT is a lightweight JavaScript library that 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: 5 days ago
JSON representation

NexosYT is a lightweight JavaScript library that 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 (6 months ago)
• Default Branch: main
• Last Pushed: 2025-01-18T06:33:26.000Z (24 days ago)
• Last Synced: 2025-02-05T00:29:04.382Z (6 days 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

        
![GitHub Pages](https://img.shields.io/github/deployments/nexoscreator/lazy-youtube-player/github-pages.svg?style=flat-square&color=cyan)

![GitHub Release](https://img.shields.io/github/v/release/nexoscreator/lazy-youtube-player.svg?style=flat-square&color=cyan)

![GitHub License](https://img.shields.io/github/license/nexoscreator/lazy-youtube-player.svg?style=flat-square&color=cyan)

![GitHub code size](https://img.shields.io/github/languages/code-size/nexoscreator/lazy-youtube-player.svg?style=flat-square&color=cyan)

---

# NexosYT - Lazy YouTube Player 🎥

![image](.github/preview.gif)

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 📦

```html

```

---

### Usage 🚀

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

```html



```


optional: `data-thumbnail="CUSTOM_THUMBNAIL_URL"`

---

### Links 🔗

[![Web Demo](https://img.shields.io/badge/Web-Demo-blue?style=for-the-badge&logo=google-chrome)](https://nexoscreator.github.io/lazy-youtube-player)

[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-green?style=for-the-badge&logo=github)](https://github.com/nexoscreator/lazy-youtube-player)

[![YouTube Video](https://img.shields.io/badge/YouTube-Video-red?style=for-the-badge&logo=youtube)](https://youtu.be/rMnDe0iEGRs?si=L7UPOsBBW5Q)

[![NPM Package](https://img.shields.io/badge/NPM-Package-orange?style=for-the-badge&logo=npm)]([https://www.npmjs.com/package/featurastic-ui-buttons](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 🤝

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](CONTRIBUTING.md) file for more details.

---

### License 📄

This project is licensed under the MIT License - see the [License](LICENSE) file for details.

---

### Support 💖

If you like this project, please consider giving it a ⭐ on [GitHub](https://github.com/nexoscreator/lazy-youtube-player) and sharing it with your friends!

---

Created with ❤️ by [@nexoscreator](https://github.com/nexoscreator)