# react-youtube

> React.js powered YouTube player component

Latest version **10.1.0** (published 2022-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-youtube
pnpm add react-youtube
yarn add react-youtube
bun add react-youtube
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 10.1.0 |
| Published | 2022-11-22 |
| First published | 2014-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 14.x |
| Dependencies | 3 |
| Unpacked size | 72.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1903 |
| Author | Tjalling Tolle |
| Maintainers | tjallingt |
| Keywords | react, youtube, player, react-component |

## Links

- npm: https://www.npmjs.com/package/react-youtube
- Repository: https://github.com/tjallingt/react-youtube
- Issues: https://github.com/tjallingt/react-youtube/issues
- npm.io page: https://npm.io/package/react-youtube

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) 15.8.1
- [youtube-player](https://npm.io/package/youtube-player.md) 5.5.2
- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) 3.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 10.1.0 (latest) — 2022-11-22
- 10.1.0-canary.1 (canary) — 2022-11-22
- 10.0.0-canary.2 — 2022-11-22
- 10.0.0 — 2022-09-12
- 10.0.0-canary.1 — 2022-09-12
- 9.0.3 — 2022-07-04
- 9.0.3-canary.1 — 2022-06-19
- 9.0.2-canary.2 — 2022-06-19
- 9.0.2 — 2022-05-25
- 9.0.2-canary.1 — 2022-05-25
- 9.0.1-canary.2 — 2022-05-25
- 9.0.1 — 2022-04-28
- 9.0.1-canary.1 — 2022-04-28
- 9.0.0 — 2022-04-28
- 9.0.0-canary.1 — 2022-04-28
- … 88 more at https://npm.io/package/react-youtube/versions

## README

![Release](https://github.com/tjallingt/react-youtube/workflows/Release/badge.svg) ![Tests](https://github.com/tjallingt/react-youtube/workflows/Tests/badge.svg) ![Example](https://github.com/tjallingt/react-youtube/workflows/Example/badge.svg)

# react-youtube

Simple [React](http://facebook.github.io/react/) component acting as a thin layer over the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference)

## Features

- url playback
- [playback event bindings](https://developers.google.com/youtube/iframe_api_reference#Events)
- [customizable player options](https://developers.google.com/youtube/player_parameters)

## Installation

### NPM

```bash
npm install react-youtube
```

### Yarn

```bash
yarn add react-youtube
```

### PNPM

```bash
pnpm add react-youtube
```

## Usage

```js
<YouTube
  videoId={string}                  // defaults -> ''
  id={string}                       // defaults -> ''
  className={string}                // defaults -> ''
  iframeClassName={string}          // defaults -> ''
  style={object}                    // defaults -> {}
  title={string}                    // defaults -> ''
  loading={string}                  // defaults -> undefined
  opts={obj}                        // defaults -> {}
  onReady={func}                    // defaults -> noop
  onPlay={func}                     // defaults -> noop
  onPause={func}                    // defaults -> noop
  onEnd={func}                      // defaults -> noop
  onError={func}                    // defaults -> noop
  onStateChange={func}              // defaults -> noop
  onPlaybackRateChange={func}       // defaults -> noop
  onPlaybackQualityChange={func}    // defaults -> noop
/>
```

For convenience it is also possible to access the PlayerState constants through react-youtube:
`YouTube.PlayerState` contains the values that are used by the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference#onStateChange).

## Example

```jsx
// js
import React from 'react';
import YouTube from 'react-youtube';

class Example extends React.Component {
  render() {
    const opts = {
      height: '390',
      width: '640',
      playerVars: {
        // https://developers.google.com/youtube/player_parameters
        autoplay: 1,
      },
    };

    return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this._onReady} />;
  }

  _onReady(event) {
    // access to player in all event handlers via event.target
    event.target.pauseVideo();
  }
}
```

```tsx
// ts
import React from 'react';
import YouTube, { YouTubeProps } from 'react-youtube';

function Example() {
  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
    // access to player in all event handlers via event.target
    event.target.pauseVideo();
  }

  const opts: YouTubeProps['opts'] = {
    height: '390',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1,
    },
  };

  return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={onPlayerReady} />;
}
```

## Controlling the player

You can access & control the player in a way similar to the [official api](https://developers.google.com/youtube/iframe_api_reference#Events):

> The ~~API~~ _component_ will pass an event object as the sole argument to each of ~~those functions~~ _the event handler props_. The event object has the following properties:
>
> - The event's `target` identifies the video player that corresponds to the event.
> - The event's `data` specifies a value relevant to the event. Note that the `onReady` event does not specify a `data` property.

# License

MIT

---
_Source: https://npm.io/package/react-youtube · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._