Plyr — Simple Accessible HTML5 Media Player

Introduction

Plyr is a lightweight HTML5 media player that wraps native <video>, <audio>, YouTube, and Vimeo into a consistent, accessible interface. It provides a polished default UI while staying small and easy to customize through CSS custom properties and a clear JavaScript API.

What Plyr Does

• Enhances native HTML5 video and audio elements with a clean custom UI
• Embeds YouTube and Vimeo with the same unified player interface
• Provides full keyboard navigation and screen reader support out of the box
• Supports captions, quality selection, speed control, and picture-in-picture
• Offers a plugin-friendly event system and API for programmatic control

Architecture Overview

Plyr attaches to existing media elements or embed containers in the DOM. It injects its own control bar and overlays while delegating actual playback to the browser's native media engine or the platform's embed API. A provider abstraction normalizes the differences between HTML5, YouTube, and Vimeo so the same events and methods work across all three sources.

Self-Hosting & Configuration

• Install via npm or load from the CDN with a single script and stylesheet
• Target any <video>, <audio>, or <div> element by selector or reference
• Customize appearance using CSS custom properties like --plyr-color-main
• Pass a config object to enable or disable specific controls and behaviors
• Use the source setter to switch media dynamically without re-initialization

Key Features

• Accessible by default with ARIA labels, focus management, and keyboard controls
• Responsive design that adapts to any container width
• Full-screen, picture-in-picture, and AirPlay support where available
• Internationalization with configurable UI strings for any language
• Under 30 KB gzipped with no external dependencies

Comparison with Similar Tools

• Video.js — Larger ecosystem with plugins; Plyr is lighter and simpler to theme
• MediaElement.js — Flash fallback era player; Plyr is modern HTML5 only
• Vidstack — Framework-agnostic headless player; Plyr ships a ready-made UI
• Clappr — Extensible plugin architecture; Plyr prioritizes simplicity and accessibility

FAQ

Q: Can I use Plyr with React or Vue? A: Yes. Community wrappers exist, or you can initialize Plyr in a useEffect or mounted hook on a ref.

Q: Does Plyr support HLS or DASH streaming? A: Not natively. Pair it with hls.js or dash.js to handle adaptive bitrate and pass the source to Plyr.

Q: How do I add ads to the player? A: Plyr has a built-in ads plugin that integrates with Google IMA SDK for pre-roll and mid-roll ads.

Q: Is Plyr actively maintained? A: The project receives community contributions and periodic releases on GitHub and npm.

Sources

• https://github.com/sampotts/plyr
• https://plyr.io