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. 👍
Plyr is great! I am using it for years now on nearly every project and it does its job just fine :)
It is quite lightweight and customizable and supports Vimeo too.
Hi. Great article. Well done. I really enjoy it but I’m having a little trouble. Could you help me please how to fix the JavaScript and Html for this Plyr to be able using it for multiple players?
How do I make the plyr progress bar in full width? So like the player progress bar is full width and underneath it are all the controls.
on video pause, I dont want the large play button to appear anymore. How can that be achieved?