Plyr: CSS Styleable Video Player

Plyr Brings CSS Styling to YouTube Embeds

Sam Potts has released Plyr, a JavaScript library that makes video players fully styleable with CSS. Its standout feature: you can point it at YouTube videos, meaning even those embeds can be visually customized.

For standard HTML5 video and audio tags, Plyr can be invoked directly on the elements. YouTube content requires wrapping the native embed code as follows:

<div class="plyr__video-embed" id="player">
  <!-- copy/paste from YouTube -->
  <iframe src="" ... ></iframe>
<div>

const player = new Plyr("#player");

Once the library is initialized, loading the accompanying CSS file is all that’s needed. The stylesheet is built on CSS custom properties, enabling a full color-theme change with a single declaration:

html {
  --plyr-color-main: #f18f35;
}

The project exposes numerous custom properties beyond colors, giving developers granular control over the player’s appearance. The package also includes built-in responsive behavior, using aspect-ratio-based HTML and CSS to automatically scale videos for different screen sizes. A working example is available as a CodePen.