1. Core Concepts
  2. Skins

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 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.

        media-community-skin[data-audio] {
  --audio-brand: #f5f5f5;
  --audio-bg: black;
  --audio-border: 1px solid rgb(255 255 255 / 0.1);
  --audio-border-radius: 6px;
  --audio-font-family: sans-serif;
  --audio-controls-color: #f5f5f5;
  --audio-focus-ring: 0 0 0 3px rgb(78 156 246);

  --audio-title-font-size: 14px;
  --audio-title-font-weight: 500;
  --audio-title-color: rgb(255 255 255 / 0.64);

  --audio-time-divider-color: rgb(224, 224, 224);

  --audio-button-size: 40px;
  --audio-play-button-size: 30px;
  --audio-play-button-bg: white;
  --audio-play-button-color: black;
  --audio-play-button-border-radius: 100%;

  --audio-buffering-stripe-color: rgb(0 0 0 / 0.25);
  --audio-buffering-stripe-size: 30px;

  --audio-slider-chapter-title-color: black;

  --audio-menu-max-height: 320px;

  --audio-captions-min-height: 28px;
  --audio-captions-offset: 6px;
  --audio-captions-bg: transparent;
  --audio-cue-font-size: 14px;
  --audio-cue-color: white;
  --audio-cue-bg: black;
  --audio-cue-border: 1px solid rgb(255 255 255 / 0.1);
}

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.

css 
        media-community-skin[data-video] {
  --video-brand: #f5f5f5;
  --video-font-family: sans-serif;
  --video-controls-color: #f5f5f5;
  --video-border: 1px solid rgb(255 255 255 / 0.1);
  --video-focus-ring: 0 0 0 3px rgb(78 156 246);

  --video-title-color: #dedede;
  --video-title-font-size: 16px;
  --video-title-font-weight: 500;
  --video-title-font-family: sans-serif;
  --video-fullscreen-title-font-size: 16px;

  --video-mobile-button-size: 32px;
  --video-volume-slider-max-width: 72px;
  --video-gesture-seek-width: 20%;

  --video-scrim-bg: rgb(0 0 0 / 0.3);
  --video-scrim-in-transition: opacity 0.15s ease-in;
  --video-scrim-out-transition: opacity 0.15s ease-out;

  --video-controls-in-transition: opacity 0.2s ease-in;
  --video-controls-out-transition: opacity 0.2s ease-out;

  --video-captions-transition: bottom 0.15s linear;
  --video-captions-offset: 72px;
  --video-mobile-captions-offset: 48px;
  --video-large-fullscreen-captions-offset: 54px;

  --video-time-divider-color: rgb(224, 224, 224);
  --video-fullscreen-time-font-size: 16px;

  --video-mobile-play-button-bg: rgb(0 0 0 / 0.6);
  --video-mobile-play-button-size: 40px;
  --video-mobile-play-button-size: 40px;
  --video-mobile-play-button-transform: translateY(25%);

  --video-mobile-start-duration-padding: 3px 6px;
  --video-mobile-start-duration-color: var(--video-controls-color);
  --video-mobile-start-duration-bg: rgb(0 0 0 / 0.64);
}

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:
TIP

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.

Previous <- Styling
Next Tailwind ->