https://github.com/mcnaveen/react-youtube-lazyload

⚡A blazing fast YouTube embed component that supports lazy loading.
https://github.com/mcnaveen/react-youtube-lazyload

embed lazyload react react-youtube-player youtube youtube-embed youtube-embed-player youtube-player

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mcnaveen/react-youtube-lazyload
• Owner: mcnaveen
• Created: 2022-04-05T05:52:29.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-08T06:44:56.000Z (9 months ago)
• Last Synced: 2024-10-01T15:49:12.691Z (4 months ago)
• Topics: embed, lazyload, react, react-youtube-player, youtube, youtube-embed, youtube-embed-player, youtube-player
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-youtube-lazyload
• Size: 391 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-blazingly-fast - react-youtube-lazyload - ⚡A blazing fast YouTube embed component that supports lazy loading. (JavaScript)

README

        
# React YouTube Lazyload

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

[![NPM](https://img.shields.io/npm/v/react-youtube-lazyload.svg)](https://www.npmjs.com/package/react-youtube-lazyload) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![React-YouTube-Lazyload](./images/cover.png)

## :package: Requirements

```

- React 16.8.0 or later

```

## :sparkles: Installation

```bash

npm install --save react-youtube-lazyload

(or)

yarn add react-youtube-lazyload

```

## :bulb: 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.

```

## :pen: Usage

```jsx

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 (

     setPlaying(e)}

      playing={playing}

      className='w-full h-96'

    />

     setPlaying(!playing)}>Play/Pause

  )

}

export default App

```

## :green_heart: Message

I hope you find this project useful. If you have any questions, please create an issue.

## License

MIT © [mcnaveen](https://github.com/mcnaveen)