Nicotine Powered Man


    2.2.0-peergrade.1 • Public • Published

    ReactPlyr Video Component

    npm npm Storybook 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="">


    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) ""
    blankVideo Blank video (used to prevent errors on source change) ""
    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: 'auto', update: false }
    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: '', iframe: '{0}?{1}', api: '{0}.json' }, youtube: { sdk: '', api: '{0}&key={1}&fields=items(snippet(title))&part=snippet', poster: '{0}/maxresdefault.jpg,{0}/hqdefault.jpg' }, googleIMA: { sdk: '' } }
    keys API keys { google: null }
    ads Advertisements plugin
    Register for an account here:
    { enabled: false, publisherId: '', tagUrl: '' }
    tracks []


    Please open an issue for support.


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




    npm i @peergrade/react-plyr

    DownloadsWeekly Downloads






    Unpacked Size

    67.9 kB

    Total Files


    Last publish


    • florian_eduflow
    • malthejorgensen
    • git-pull
    • notifly
    • tony
    • marconunnari