plyr

Plyr is a simple, lightweight, accessible and customizable media player for HTML5 video and audio, YouTube and Vimeo embeds. It targets modern browsers and is written in vanilla ES6 JavaScript with no framework or jQuery dependency, with styles authored in Sass and exposed through CSS custom properties. Key capabilities evidenced by the README: - Format support: native HTML5 video and audio elements, plus progressive enhancement of YouTube and Vimeo iframes or plain divs using data-plyr-provider and data-plyr-embed-id attributes. - Accessibility: VTT captions and screen reader support, with semantic markup such as input type=range for volume, progress elements and real buttons. - Customization: CSS custom properties (for example --plyr-color-main) and Sass variables let you restyle the player globally, per class or inline. - Responsive layout and a responsive 16:9 embed wrapper class for iframe providers. - Streaming playback integrations with hls.js, Shaka Player and dash.js. - Standardized JavaScript API and events across all providers, so YouTube and Vimeo do not require separate API handling. - Fullscreen with fallback to full-window mode, picture-in-picture, playsinline support, keyboard shortcuts, speed controls, multiple caption tracks, i18n of controls and preview thumbnails. - Monetization hooks via a partner ad integration or a custom ads.tagUrl option. Setup is straightforward: include plyr.css and plyr.js (or the polyfilled build) from a CDN or self-hosted files, then instantiate with new Plyr('#player'). Prebuilt minified files are available from the CDN or unpkg, or you can build from source with npm i && npm run build. An SVG sprite for icons is loaded from the CDN by default and can be overridden through options. The README documents a large set of CSS custom properties covering colors, control spacing and radii, menus, tooltips, progress and range styling, captions and typography, making it practical to match an existing design system without forking the stylesheet.