Youtube Repeat Player Component
A react component to play youtube videos with a feature to play them on repeat
Watch it being used live
Install
npm install --save youtube-repeat-player
Usage
; // JSX<YRPlayer className="my-player-class" videoId="YuXLN23ZGQo" youtubeApiLoaded=youtubeApiLoaded autoPlayVideo=true/>;
Props
Prop Name | Required (Default Value) | Data Type | Description |
---|---|---|---|
videoId |
Yes | String | Id of the youtube video |
repeat |
No(true) | Boolean | Signifies if the video should be played on repeat |
onVideoPlayed |
No | Function | Callback fired when the video is being played by the user |
styles |
No | Object | All the inline styles, directly passed to the iframe element |
className |
No | String | Name of the class passed direclty to the iframe element |
autoPlayVideo |
No(false) | Boolean | Signifies whether the video should be auto played |
Note: Using this component will require loading the youtube iframe API manually.
Currently this version does not load youtube iframe API. This can be done using the following code in the constructor of the parent component of the YRPlayer component
// Keeping track whether the API has been loaded in the state of the parentthisstate = youtubeApiLoaded: false ; // Making the script tagvar tag = document;tagsrc = "https://www.youtube.com/iframe_api";tagasync = 1;documenthead; // To signal the YRPlayer component that the API has been loadedwindow"onYouTubeIframeAPIReady" = { this;}; // This setState will cause the YRPlayer component to re-render
Contributing
In case of bug or feature request, feel free to file an issue.