1. Styling
  2. Skins

Styling

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

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-focus-ring: 0 0 0 3px var(--audio-brand);
  --audio-bg: black;
  --audio-border-radius: 6px;
  --audio-font-family: sans-serif;
  --audio-controls-color: #f5f5f5;

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

  --audio-time-muted-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: 8px;
  --audio-captions-bg: transparent;
  --audio-cue-bg: black;
  --audio-cue-font-size: 14px;
}

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-focus-ring: 0 0 0 3px var(--video-brand);
  --video-font-family: sans-serif;
  --video-controls-color: #f5f5f5;

  --video-title-font-size: 16px;
  --video-title-font-weight: 500;

  --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.2s linear;
  --video-captions-offset: 72px;
  --video-mobile-captions-offset: 48px;

  --video-time-muted-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 <- Foundation
Next Tailwind ->