A simple, accessible HTML5 media player React Component

Usage no npm install needed!

<script type="module">
  import faqtaReactPlyr from 'https://cdn.skypack.dev/faqta-react-plyr';


ReactPlyr Video Component

npm npm David Travis license

A React video component based on Plyr.



Add react-plyr into your package.json dependencies:

npm install react-plyr --save


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">


Simple Youtube or Vimeo video

import Plyr from 'react-plyr';

// add the component in the render function
render() {
  return (
      type="youtube" // or "vimeo"

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


Prop Default
enable Disable true
title Custom media title ""
debug Logging to console false
autoplay Auto play (if supported) false
autopause Only allow one media playing at once (vimeo only) true
seekTime Default time to skip when rewind/fast forward 10
volume Default volume 1
muted Default volume (0) false
duration Pass a custom duration null
displayDuration Display the media duration on load in the current time position
If you have opted to display both duration and currentTime, this is ignored
invertTime Invert the current time to be a countdown true
toggleInvert Clicking the currentTime inverts it's value to show time left rather than elapsed true
ratio Aspect ratio (for embeds) "16:9"
clickToPlay Click video container to play/pause true
hideControls Auto hide the controls true
resetOnEnd Reset to start when playback ended false
disableContextMenu Disable the standard context menu true
loadSprite Sprite (for icons) true
iconPrefix Sprite (for icons) "plyr"
iconUrl Sprite (for icons) "https://cdn.plyr.io/3.3.5/plyr.svg"
blankVideo Blank video (used to prevent errors on source change) "https://cdn.plyr.io/static/blank.mp4"
quality Quality default { default: 576, options: [ 4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, "default" ] }
loop Set loops { loop: { active: false } }
speed Speed default and options to display { selected: 1, options: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ] }
keyboard Keyboard shortcut settings { focused: true, global: false }
tooltips Display tooltips { controls: false, seek: true }
captions Captions settings { active: false, language: (typeof navigator !== 'undefined') ? (navigator.language || navigator.userLanguage).split('-')[0] : 'en' }
fullscreen Fullscreen settings { enabled: true, fallback: true, iosNative: false }
storage Local storage { enabled: true, key: 'plyr' }
controls Default controls [ 'play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen' ]
settings [ 'captions', 'quality', 'speed' ]
i18n Localisation { restart: 'Restart', rewind: 'Rewind {seektime} secs', play: 'Play', pause: 'Pause', fastForward: 'Forward {seektime} secs', seek: 'Seek', played: 'Played', buffered: 'Buffered', currentTime: 'Current time', duration: 'Duration', volume: 'Volume', mute: 'Mute', unmute: 'Unmute', enableCaptions: 'Enable captions', disableCaptions: 'Disable captions', enterFullscreen: 'Enter fullscreen', exitFullscreen: 'Exit fullscreen', frameTitle: 'Player for {title}', captions: 'Captions', settings: 'Settings', speed: 'Speed', normal: 'Normal', quality: 'Quality', loop: 'Loop', start: 'Start', end: 'End', all: 'All', reset: 'Reset', disabled: 'Disabled', enabled: 'Enabled', advertisement: 'Ad' }
urls URLs { vimeo: { sdk: 'https://player.vimeo.com/api/player.js', iframe: 'https://player.vimeo.com/video/{0}?{1}', api: 'https://vimeo.com/api/v2/video/{0}.json' }, youtube: { sdk: 'https://www.youtube.com/iframe_api', api: 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet', poster: 'https://img.youtube.com/vi/{0}/maxresdefault.jpg,https://img.youtube.com/vi/{0}/hqdefault.jpg' }, googleIMA: { sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js' } }
keys API keys { google: null }
ads Advertisements plugin
Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
{ enabled: false, publisherId: '' }
captions []


Please open an issue for support.


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