Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tjallingt/react-youtube
react.js powered YouTube player component
https://github.com/tjallingt/react-youtube
Last synced: 6 days ago
JSON representation
react.js powered YouTube player component
- Host: GitHub
- URL: https://github.com/tjallingt/react-youtube
- Owner: tjallingt
- License: mit
- Created: 2014-07-17T13:36:14.000Z (over 10 years ago)
- Default Branch: canary
- Last Pushed: 2023-12-19T20:04:07.000Z (about 1 year ago)
- Last Synced: 2024-10-29T15:05:27.676Z (3 months ago)
- Language: TypeScript
- Homepage: http://tjallingt.github.io/react-youtube/
- Size: 2.35 MB
- Stars: 1,860
- Watchers: 20
- Forks: 223
- Open Issues: 84
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - tjallingt/react-youtube - react.js powered YouTube player component (TypeScript)
- stars - react-youtube
- stars - react-youtube
README
  
# 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
```
### TypeScript (optional)
```
npm install -D @types/youtube-player
# OR
yarn add -D @types/youtube-player
# OR
pnpm add -D @types/youtube-player
```
## Usage
```js
''
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 ;
}
_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](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