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

20.6K Stars 2.5K Forks MIT License 2.2K Commits 686 Opened issues


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


  • 📼 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
    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
  • 🏎 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


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


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

. This is to prevent it being downloaded twice. If you're sure the image will be cached, you can still use the
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 
classname will make the embed responsive. You can add the
(YouTube only) and
(YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the
should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.


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 -

Note: The

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

Or the

non progressively enhanced method:

Note: The

can either be the video ID or URL for the media.


Much the same as YouTube above.

Or the

non progressively enhanced method:


You can use Plyr as an ES6 module as follows:

import Plyr from 'plyr';

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

Alternatively you can include the

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.