React YouTube Lazyload

📦 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

💚 Message

License