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.

Tal vez te puede interesar:

1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
2. Cambiar el tamaño de los valores en pasos en CSS
3. ¿Qué hace “revertir” en CSS?
4. CSS4 es una mala idea

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

programar

es

https://aprendeprogramando.es/static/images/programar-plyr-reproductor-de-video-con-estilo-css-1694-0.jpg

2024-11-27

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente