Plyr: Reproductor de vídeo con estilo CSS

Me encontré con Plyr de Sam Potts, una biblioteca de JavaScript para reproductores de vídeo con estilos. Lo que me llamó la atención es que puedes enumerar videos de YouTube como fuente, por lo que esencialmente puedes tener un video de YouTube con estilo CSS. Fresco.

Para video y audio HTML5, puedes apuntar a esos elementos directamente y llamar a la biblioteca. Para YouTube, ajustas la inserción nativa como…

div  !-- copy/paste from YouTube --  iframe src="" ... /iframediv

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

Ahora está listo para comenzar siempre y cuando esté cargando el archivo CSS. El CSS se escribió con propiedades personalizadas de CSS, por lo que podría escribir una declaración única para establecer el tema de color, como…

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

Hay un montón de propiedades personalizadas con las que jugar. Dejaré un ejemplo de Pen aquí:

Integrada en HTML/CSS está la configuración para hacer que los videos también respondan según la relación de aspecto.

Si quieres conocer otros artículos parecidos a Plyr: Reproductor de vídeo con estilo CSS puedes visitar la categoría CSS.