A React video component based on Plyr

by React

ReactPlyr Video Component

A React video component based on Plyr.

View demo Download Source

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.

GitHub