mcnaveen / react-youtube-lazyload Goto Github PK

View Code? Open in Web Editor NEW

⚡A blazing fast YouTube embed component that supports lazy loading.

HTML 26.58% JavaScript 54.21% CSS 19.21%

react-youtube-lazyload's Introduction

React YouTube Lazyload

⚡ A blazing fast YouTube embed component that supports lazy loading.

📦 Requirements

- React 16.8.0 or later

✨ Installation

npm install --save react-youtube-lazyload

(or)

yarn add react-youtube-lazyload

💡 Props

- videoId (Required): (string) The YouTube video ID.
- width (Optional): (number) Change the width of the player.
- height (Optional): (number) Change the height of the player.
- privacy (Optional): (boolean) Privacy Enhanced Mode
- playing (Optional): (boolean) Control the play/pause state of the video.
- className (Optional): (string) Additional CSS classname to apply to the YouTube component (Out of the box tailwindcss support).
- onPlayChange (Optional): (function) Callback function to be called when the play state changes. It receives a boolean argument indicating whether the video is playing or not.

🖊️ Usage

import React from 'react'
import { YouTube } from 'react-youtube-lazyload'
import 'react-youtube-lazyload/dist/index.css'

const App = () => {
  const [playing, setPlaying] = React.useState(false)
  return (
    <YouTube
      videoId='dQw4w9WgXcQ'
      privacy={true} // Privacy Enhanced Mode (optional) - default: false
      onPlayChange={(e) => setPlaying(e)}
      playing={playing}
      className='w-full h-96'
    />
    <button onClick={() => setPlaying(!playing)}>Play/Pause</button>
  )
}

export default App