📺 A React video component based on Plyr
Clone or download
Pull request Compare This branch is even with xDae:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
demo
docs
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
screenshot.png
yarn.lock

README.md

ReactPlyr Video Component

npm npm David Travis license

A React video component based on Plyr.

react-plyr

Installation

Add react-plyr into your package.json dependencies:

npm install react-plyr --save

CSS

Include the plyr.css stylsheet into your <head>

<link rel="stylesheet" href="path/to/plyr.css">

If you want to use our CDN (provided by Fastly) for the default CSS, you can use the following:

<link rel="stylesheet" href="https://cdn.plyr.io/3.3.21/plyr.css">

Usage

Simple Youtube or Vimeo video

import Plyr from 'react-plyr';

// add the component in the render function
render() {
  return (
    <Plyr
      type="youtube" // or "vimeo"
      videoId="CDFN1VatiJA"
    />
  )
}

Note: The videoId can either be the video ID or URL for the media.

Props

[WIP]

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.