Youtube Repeat Player Component

A react component to play youtube videos with a feature to play them on repeat

Watch it being used live

Youtueb on Repeat

Install

npm install --save youtube-repeat-player

Usage

import YRPlayer from "youtube-repeat-player";

// 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 parent
this.state = { youtubeApiLoaded: false };

// Making the script tag
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
tag.async = 1;
document.head.appendChild(tag);

// To signal the YRPlayer component that the API has been loaded
window["onYouTubeIframeAPIReady"] = e => {
  this.setState({
    youtubeApiLoaded: true
  });
};

// This setState will cause the YRPlayer component to re-render

Contributing

In case of bug or feature request, feel free to file an issue.