Core Concepts
Skins
Skins are perfect for when you're looking for a beautiful pre-built player design out of the box rather than building your own.
Community Skin
Installation
Follow the installation guide to get started with the Community Skin.
Audio Preview
Video Preview
Breakpoints
The player will display either a desktop or mobile optimized UI depending on predefined horizontal and vertical breakpoints. To learn how you can customize those breakpoints read here.
Features
Follow any of the links below to configure certain player features:
- Audio Tracks
- Captions
- Video Qualities
- Thumbnails
- Chapters
- Live Streams - not supported by the skin yet.
Audio CSS Vars
The following is a complete list of CSS variables available for customizing the Community Audio Skin. This is in addition to the Component CSS variables listed below.
Video CSS Vars
The following is a complete list of CSS variables available for customizing the Community Video Skin. This is in addition to the Component CSS variables listed below.
Component CSS Vars
Follow any of the links below to find a comprehensive list of CSS variables available for customizing specific components:
Internationalization
The Community Skin supports dynamically changing the language used throughout the player UI by setting the translations
property like so:
Set translations
back to null
for the default English language.
Plyr Skin
❌️ The Plyr Skin is currently not available. We have an issue on GitHub tracking it. You can watch the player repository, follow us on Twitter, or join our Discord channel to be notified when it's ready.