plyr

Plyr is a lightweight, framework-free JavaScript media player that progressively enhances native <video> and <audio> elements, plus YouTube and Vimeo embeds, into a single consistent, customizable UI. It replaces browser-inconsistent native controls with accessible, keyboard-navigable markup (real <button>s, <input type="range"> for scrubbers) rather than <div>/<span> hacks.

Because Plyr wraps YouTube and Vimeo’s own embed APIs behind the same event and control API as native HTML5 media, application code can control playback, volume, and captions identically regardless of the underlying provider. It also supports HLS and DASH streaming via companion libraries (hls.js, dash.js, Shaka Player), VTT captions with multi-track support, Picture-in-Picture, keyboard shortcuts, and a documented video-ad monetization hook.

What You Get

• A single new Plyr('#player') API that works identically across HTML5 video/audio, YouTube, and Vimeo sources
• Accessible, semantic controls (<button>, <input type="range">, <progress>) instead of styled <div>/<a> hacks
• Built-in support for VTT captions (multiple tracks), keyboard shortcuts, fullscreen with fallback, and Picture-in-Picture
• CSS custom properties for restyling the player’s design tokens without forking the stylesheet
• Streaming integration points for hls.js, dash.js, and Shaka Player for adaptive bitrate playback

Common Use Cases

• Replacing inconsistent native <video>/<audio> browser controls with one accessible, brand-consistent player UI
• Building a unified video experience for a site that embeds both self-hosted HTML5 video and YouTube/Vimeo content
• Delivering adaptive-bitrate streaming (HLS/DASH) with a polished UI by pairing Plyr with hls.js or dash.js
• Monetizing video content by wiring Plyr’s ad-config hooks to a video ad provider

Under The Hood

Architecture - plyr.js is the entry class that dispatches to provider-specific modules: html5.js for native media elements, and embed handling for YouTube/Vimeo that maps each provider’s own JS API onto Plyr’s standardized event/control surface. ui.js and controls.js build and manage the DOM control bar, captions.js handles VTT track parsing/rendering, fullscreen.js and storage.js handle fullscreen fallback and persisting user preferences (volume, captions state) across sessions, and support.js/utils/ centralize feature detection so the same codebase adapts to differing browser capabilities.

Tech Stack - Written in vanilla ES6+ JavaScript (84% of the repo) with SCSS (16%) for styling, published as an ESM module ("type": "module") with dual import/require/browser export conditions and a separate polyfilled build (plyr.polyfilled.js) for older browsers. No framework dependency (React/Vue/etc.) is required, keeping integration cost low regardless of the host application’s stack.

Code Quality - The 3.x line has been stable and widely adopted (nearly 30k stars, 3.1k forks) but development activity has slowed (health score flags ‘low recent activity’ and ‘infrequent maintenance’), with the last tagged release (3.8.4) shipping in January and a long gap before it from 3.7.x. TypeScript declarations (plyr.d.ts) ship alongside the JS source for editor/type support despite the codebase itself being plain JS.

API Design - new Plyr(selector, options) is the entire public entry point; playback controls, volume, and captions are then driven through instance methods and a standardized event set that behaves identically whether the underlying source is HTML5 media or a YouTube/Vimeo embed — a deliberate design goal per the README (‘no messing around with Vimeo and YouTube APIs, all events are standardized’). CSS custom properties expose theming without requiring a SCSS build step, lowering the bar for basic restyling.