https://github.com/gajus/react-youtube-player

React component that encapsulates YouTube IFrame Player API and exposes player controls using the component properties.
https://github.com/gajus/react-youtube-player

Last synced: about 2 months ago
JSON representation

React component that encapsulates YouTube IFrame Player API and exposes player controls using the component properties.

• Host: GitHub
• URL: https://github.com/gajus/react-youtube-player
• Owner: gajus
• License: other
• Created: 2015-09-11T10:24:07.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-11-12T23:43:21.000Z (about 6 years ago)
• Last Synced: 2024-10-13T01:19:20.014Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 65.4 KB
• Stars: 40
• Watchers: 3
• Forks: 17
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-youtube-player

[![Travis build status](http://img.shields.io/travis/gajus/react-youtube-player/master.svg?style=flat-square)](https://travis-ci.org/gajus/react-youtube-player)

[![NPM version](http://img.shields.io/npm/v/react-youtube-player.svg?style=flat-square)](https://www.npmjs.org/package/react-youtube-player)

[![js-canonical-style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)

React component that encapsulates [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) and exposes player controls using the component properties.

## Implementation

`componentDidMount` callback is used to replace the rendered element with an `iframe` that loads a YouTube Player.

`componentWillReceiveProps` is used to detect when component properties change, compare them with the state of the YouTube Player and call YouTube IFrame Player API when necessary.

## Usage

```js

import YoutubePlayer from 'react-youtube-player';

/**

 * @typedef {string} YoutubePlayer~playbackState

 * @value 'unstarted' Stops and cancels loading of the current video. [stopVideo]{@link https://developers.google.com/youtube/iframe_api_reference#stopVideo}

 * @value 'playing' Plays the currently cued/loaded video. [playVideo]{@link https://developers.google.com/youtube/iframe_api_reference#playVideo}

 * @value 'paused' Pauses the currently playing video. [pauseVideo]{@link https://developers.google.com/youtube/iframe_api_reference#pauseVideo}

 */

/**

 * @property {string} videoId

 * @property {string|number} width (default: '100%').

 * @property {string|number} height (default: '100%').

 * @property {YoutubePlayer~playbackState} playbackState

 * @property {Object} configuration Configuration parameters to be passed to the YouTube Player (known as `playerVars` in the YouTube Player API for iframe Embeds, https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters).

 */

```

## Demo

To run the demo:

```

npm install

npm run build

npm run demo

```