!Release !Tests !Example

react-youtube

Simple React component acting as a thin layer over the YouTube IFrame Player API

Features

- url playback
- playback event bindings
- customizable player options

Installation

$3

``bash
npm install react-youtube
`

$3

`bash
yarn add react-youtube
`

$3

`bash
pnpm add react-youtube
`

Usage

`js
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.

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 ;
}

_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 ;
}
`

Controlling the player

You can access & control the player in a way similar to the official api:

> 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