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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






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

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://pseint.es/static/images/programar-plyr-reproductor-de-video-con-estilo-css-1694-0.jpg

2024-06-13

 

Plyr: Reproductor de vídeo con estilo CSS
Plyr: Reproductor de vídeo con estilo CSS

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

 

 

Update cookies preferences