Plyr: CSS Styleable Video Player

I just stumbled across Plyr from Sam Potts, a JavaScript library for styled video players. What struck me about it is that you can list YouTube videos as the source, so essentially you can have a CSS-styled YouTube video. Cool.

For HTML5 video and audio, you can target those elements directly and call the library. For YouTube, you wrap the native embed like…

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

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

Now you’re good to go as long as you’re loading up the CSS file. The CSS was written with CSS custom properties, so you could write a single declaration to set the color theme, like…

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

There are loads of custom properties to fiddle with. I’ll drop a Pen example here:

Built into the HTML/CSS is the setup to make the videos responsive by aspect ratio too. 👍