Skip to content

Latest commit

 

History

History
141 lines (96 loc) · 3.69 KB

README.md

File metadata and controls

141 lines (96 loc) · 3.69 KB
Raw

GitHub Pages GitHub Release GitHub License GitHub code size

NexosYT - Lazy YouTube Player

image

Lazy YouTube Player is a lightweight, customizable YouTube player component with support for React, Vue, and Svelte. It provides a simple way to embed YouTube videos with lazy loading capabilities, improving your website's performance.

Features

  • Lazy loading of YouTube videos
  • Support for React, Vue, and Svelte
  • Customizable player options
  • TypeScript support
  • Smooth transitions and hover effects
  • Responsive design

Links

Web Demo GitHub Repo YouTube Video

Installation

Choose the package that corresponds to your framework:

React

npm install @lazy-youtube-player/react

Vue

npm install @lazy-youtube-player/vue

Svelte

npm install @lazy-youtube-player/svelte

Vanilla

<script src="https://cdn.jsdelivr.net/gh/nexoscreator/lazy-youtube-player@v0.0.1/yt-player.min.js" defer></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nexoscreator/lazy-youtube-player@v0.0.1/yt-player.min.css">

Usage

React

import React from 'react';
import LazyYoutubePlayerComponent from './components/LazyYoutubePlayerComponent';

function App() {
  return (
    <div className="App">
      <LazyYoutubePlayerComponent videoId="9FubrG9p3kc" />
    </div>
  );
}

export default App;

Vue or Nuxt 3

<template>
  <LazyYoutubePlayer videoId="9FubrG9p3kc" />
</template>

<script setup>
import LazyYoutubePlayer from '~/components/LazyYoutubePlayer.vue';
</script>

Svelte

<script>
  import LazyYoutubePlayer from './components/LazyYoutubePlayer.svelte';
</script>

<LazyYoutubePlayer videoId="9FubrG9p3kc" />

Vanilla

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

API

The LazyYoutubePlayer component accepts the following props:

  • videoId (string, required): The YouTube video ID.
  • 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. 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. If you'd like to contribute to this project, please follow these ste

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/improvement).
  3. Make your changes and commit them (git commit -m 'Add feature/improvement').
  4. Push to the branch (git push origin feature/improvement).
  5. Open a Pull Request.

Please check the CONTRIBUTING.md file for more details.

License

This project is licensed under the MIT License.