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