Plyr – A Modern Front‑End Video Player: Features, Usage, and Customisation

Plyr (short for "Player") is a lightweight, elegant, and feature‑rich HTML5 video/audio player library for front‑end development. Its official website is https://plyr.io/ and the source code is hosted on GitHub at https://github.com/sampotts/plyr .

The library offers a polished UI that looks far better than the native browser player, with custom controls for progress, volume, subtitles, resolution, playback speed, picture‑in‑picture, and more.

Key built‑in capabilities include:

Support for HTML5 video/audio, YouTube and Vimeo streams.

Full accessibility with VTT subtitles and screen‑reader support.

Highly customizable UI via options and CSS custom properties.

Responsive design that works on any screen size.

Monetisation hooks, streaming support (hls.js, Shaka, dash.js), standardized API, cross‑format events, fullscreen and picture‑in‑picture modes, keyboard shortcuts, multiple subtitle tracks, i18n, preview thumbnails, and a vanilla ES6 implementation without jQuery.

To use Plyr via CDN, add the following tags to your page:

<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />

For Node.js projects, install it with:

yarn add plyr

Then import and initialise the player:

import Plyr from 'plyr';
const player = new Plyr('#player');

A typical HTML markup with custom attributes looks like this:

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />
  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

Embedding a YouTube video is as simple as adding a wrapper div with the appropriate class:

<div class="plyr__video-embed" id="player">
  <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

Custom styling can be achieved by overriding CSS custom properties. For example, to change the main button colour to red:

:root {
  --plyr-color-main: red;
}

Configuration options are passed as an object when creating the player. Example options include:

settings: ['captions', 'quality', 'speed', 'loop'] – controls which settings appear in the UI.

i18n – localisation strings.

blankVideo – placeholder video when no source is provided.

autoplay – enable or disable automatic playback.

For a full list of options see the GitHub README at https://github.com/sampotts/plyr#options .

Plyr also exposes a comprehensive JavaScript API with methods such as play() , pause() , stop() , restart() , and support for AirPlay. Detailed method documentation is available at https://github.com/sampotts/plyr#methods .

Overall, Plyr provides almost every feature a modern web video player needs, from basic playback controls to advanced customisation and API integration.