Stateful React YouTube

A React YouTube API Wrapper that allows declarative video control via props. This component is especially useful if you plan on creating an alternative timeline for YouTube videos.

----> Demo <----

Installation

npm install --save stateful-react-youtube

Usage

Include the YouTube API in your html file:

<script src="https://www.youtube.com/player_api"></script>

Fire it up:

import YouTubeVideo from "stateful-react-youtube";
//...
//in render:
<YouTubeVideo
  position={this.state.position}
  videoId={this.state.videoId}
  playing={this.state.playing}
  volume={this.state.volume}
  shouldPrestart={true}
 
  onPlayingChange={this.onPlayingChange}
  onReady={this.handleOnReady}
  onProgress={this.setPosition}
  onVolumeChange={this.handleVolumeChange}
  ></YouTubeVideo>
 

API

props (non functions)

<tr>
  <td>width</td>
  <td>String</td>
  <td>"500"</td>
  <td>Player width.</td>
</tr>
<tr>
  <td>height</td>
  <td>String</td>
  <td>"500"</td>
  <td>Player height.</td>
</tr>
<tr>
  <td>playerVars</td>
  <td>Object</td>
  <td>{}</td>
  <td>YouTube API Player Parameters. Refer to <a href="https://developers.google.com/youtube/player_parameters?playerVersion=HTML5">YouTube's documentation</a>.</td>
</tr>

props (functions)

Escape hatch

You can access the YouTube API by putting a ref on the YouTubeVideo component and accessing this.refs.yourRefName.player

Todos

• Tests

Other

This library was crafted with care by Moritz Kobrna & Calvin Claus.