https://github.com/u-wave/react-youtube
YouTube player component for React.
https://github.com/u-wave/react-youtube
embed react react-component react-youtube react-youtube-player youtube youtube-player youtube-player-component
Last synced: 5 months ago
JSON representation
YouTube player component for React.
- Host: GitHub
- URL: https://github.com/u-wave/react-youtube
- Owner: u-wave
- License: mit
- Created: 2017-03-23T11:24:29.000Z (over 8 years ago)
- Default Branch: default
- Last Pushed: 2025-01-06T12:41:52.000Z (9 months ago)
- Last Synced: 2025-05-09T01:18:16.267Z (5 months ago)
- Topics: embed, react, react-component, react-youtube, react-youtube-player, youtube, youtube-player, youtube-player-component
- Language: JavaScript
- Homepage: https://u-wave.net/react-youtube
- Size: 1.65 MB
- Stars: 126
- Watchers: 4
- Forks: 18
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @u-wave/react-youtube
YouTube player component for React.
[Install][] - [Usage][] - [Demo][] - [Props][]
## Install
```
npm install --save @u-wave/react-youtube
```
## Usage
[Demo][] - [Demo source code][]
```js
import YouTube from '@u-wave/react-youtube';
```
## Props
| Name | Type | Default | Description |
|:-----|:-----|:-----|:-----|
| video | string | | An 11-character string representing a YouTube video ID.. |
| id | string | | DOM ID for the player element. |
| className | string | | CSS className for the player element. |
| style | object | | Inline style for container element. |
| width | number, string | | Width of the player element. |
| height | number, string | | Height of the player element. |
| paused | bool | | Pause the video. |
| autoplay | bool | false | Whether the video should start playing automatically.
https://developers.google.com/youtube/player_parameters#autoplay |
| showCaptions | bool | false | Whether to show captions below the video.
https://developers.google.com/youtube/player_parameters#cc_load_policy |
| controls | bool | true | Whether to show video controls.
https://developers.google.com/youtube/player_parameters#controls |
| disableKeyboard | bool | false | Ignore keyboard controls.
https://developers.google.com/youtube/player_parameters#disablekb |
| allowFullscreen | bool | true | Whether to display the fullscreen button.
https://developers.google.com/youtube/player_parameters#fs |
| lang | string | | The player's interface language. The parameter value is an ISO 639-1 two-letter language code or a fully specified locale.
https://developers.google.com/youtube/player_parameters#hl |
| annotations | bool | true | Whether to show annotations on top of the video.
https://developers.google.com/youtube/player_parameters#iv_load_policy |
| startSeconds | number | | Time in seconds at which to start playing the video.
https://developers.google.com/youtube/player_parameters#start |
| endSeconds | number | | Time in seconds at which to stop playing the video.
https://developers.google.com/youtube/player_parameters#end |
| modestBranding | bool | false | Remove most YouTube logos from the player.
https://developers.google.com/youtube/player_parameters#modestbranding |
| playsInline | bool | false | Whether to play the video inline on iOS, instead of fullscreen.
https://developers.google.com/youtube/player_parameters#playsinline |
| showRelatedVideos | bool | true | Whether to show related videos after the video is over.
https://developers.google.com/youtube/player_parameters#rel |
| volume | number | | The playback volume, **as a number between 0 and 1**. |
| muted | bool | | Whether the video's sound should be muted. |
| suggestedQuality | string | | The suggested playback quality.
https://developers.google.com/youtube/iframe_api_reference#Playback_quality |
| playbackRate | number | | Playback speed.
https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate |
| onReady | function | | Sent when the YouTube player API has loaded. |
| onError | function | | Sent when the player triggers an error. |
| onCued | function | () => {} | Sent when the video is cued and ready to play. |
| onBuffering | function | () => {} | Sent when the video is buffering. |
| onPlaying | function | () => {} | Sent when playback has been started or resumed. |
| onPause | function | () => {} | Sent when playback has been paused. |
| onEnd | function | () => {} | Sent when playback has stopped. |
| onStateChange | function | | |
| onPlaybackRateChange | function | | |
| onPlaybackQualityChange | function | | |
## Related
- [react-youtube][] - A widely-used YouTube component. Its API matches the YouTube iframe API more closely, and it doesn't support prop-based volume/quality/playback changes.
- [@u-wave/react-vimeo][] - A Vimeo component with a similar declarative API.
## License
[MIT][]
[Install]: #install
[Usage]: #usage
[Props]: #props
[Demo]: https://u-wave.net/react-youtube
[Demo source code]: ./example
[MIT]: ./LICENSE
[react-youtube]: https://github.com/tjallingt/react-youtube
[@u-wave/react-vimeo]: https://github.com/u-wave/react-vimeo