Need help with plyr?
Click the β€œchat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sampotts
18.7K Stars 2.2K Forks MIT License 2.0K Commits 531 Opened issues

Description

A simple HTML5, YouTube and Vimeo player

Services available

!
?

Need anything else?

Contributors list

Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

Checkout the demo - Donate - Slack

npm version Gitpod Ready-to-Code Financial Contributors on Open Collective

Image of Plyr

Features

  • πŸ“Ό HTML Video & Audio, YouTube & Vimeo - support for the major formats
  • πŸ’ͺ Accessible - full support for VTT captions and screen readers
  • πŸ”§ Customizable - make the player look how you want with the markup you want
  • 😎 Clean HTML - uses the right elements.
     for volume and 
     for progress and well, 
    s for buttons. There's no
    
    or
    button hacks
  • πŸ“± Responsive - works with any screen size
  • πŸ’΅ Monetization - make money from your videos
  • πŸ“Ή Streaming - support for hls.js, Shaka and dash.js streaming playback
  • πŸŽ› API - toggle playback, volume, seeking, and more through a standardized API
  • 🎀 Events - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
  • πŸ”Ž Fullscreen - supports native fullscreen with fallback to "full window" modes
  • ⌨️ Shortcuts - supports keyboard shortcuts
  • πŸ–₯ Picture-in-Picture - supports picture-in-picture mode
  • πŸ“± Playsinline - supports the
    playsinline
    attribute
  • 🏎 Speed controls - adjust speed on the fly
  • πŸ“– Multiple captions - support for multiple caption tracks
  • 🌎 i18n support - support for internationalization of controls
  • πŸ‘Œ Preview thumbnails - support for displaying preview thumbnails
  • 🀟 No frameworks - written in "vanilla" ES6 JavaScript, no jQuery required
  • πŸ’β€β™€οΈ SASS - to include in your build processes

Demos

You can try Plyr in Codepen using our minimal templates: HTML5 video, HTML5 audio, YouTube, Vimeo. For Streaming we also have example integrations with: Dash.js, Hls.js and Shaka Player

Quick setup

HTML

Plyr extends upon the standard HTML5 media element markup so that's all you need for those types.

HTML5 Video


Note: The poster image should be specified using

data-poster
. This is to prevent it being downloaded twice. If you're sure the image will be cached, you can still use the
poster
attribute for true progressive enhancement.

HTML5 Audio


For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default

 embeds. Below are some examples. The 
plyr__video-embed
classname will make the embed responsive. You can add the
autoplay
,
loop
,
hl
(YouTube only) and
playsinline
(YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the
origin
should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.

YouTube

We recommend progressive enhancement with the embedded players. You can elect to use an

 as the source element (which Plyr will progressively enhance) or a bog standard 
with two essential data attributes -
data-plyr-provider
and
data-plyr-embed-id
.

Note: The

plyr__video-embed
classname will make the player a responsive 16:9 (most common) iframe embed. When plyr itself kicks in, your custom
ratio
config option will be used.

Or the

non progressively enhanced method:

Note: The

data-plyr-embed-id
can either be the video ID or URL for the media.

Vimeo

Much the same as YouTube above.

Or the

non progressively enhanced method:

JavaScript

You can use Plyr as an ES6 module as follows:

import Plyr from 'plyr';

const player = new Plyr('#player');

Alternatively you can include the

plyr.js
script before the closing

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.