Insertar videos receptivos fácilmente con SuperEmbed.js

La web moderna es totalmente sensible Y cada vez más diseñadores se dan cuenta de esto. Pero hay un desafío molesto cuando se trata de diseño responsivo: contenido incrustado.

Cada sitio de videos desde YouTube a Vimeo tiene una código de inserción predeterminado fijado a un determinado tamaño. Esto significa que los desarrolladores necesitan usar otras soluciones para crear videos totalmente sensibles.

Sin embargo, en lugar de usar una clase de contenedor CSS, puede usar SuperEmbed.js, una biblioteca gratuita de JavaScript para creando videos responsivos.

Este plugin resuelve dos problemas En seguida. Todos los videos incrustados estirar para llenar el recipiente principal, mientras que también es lo suficientemente flexible como para cambio de tamaño basado en la ventana del navegador.

La mejor parte es que SuperEmbed.js no requiere código extra, para que puedas solo incrustar los archivos y déjalos correr. Esta biblioteca de JS se encarga del resto por apuntando a elementos incrustados de ciertos sitios.

Todos los videos Mantener sus relaciones de aspecto específicas., para que no tengas que preocuparte por las dimensiones extrañas. Y SuperEmbed trabaja como biblioteca de vainilla JS con sin dependencias como jQuery.

En este momento, SuperEmbed soporta 15 + incrustaciones de video de sitios como YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me y Archive.org (entre muchos otros). Esta lista es continúa creciendo, así que espere que se agreguen más servicios de transmisión de video a lo largo del tiempo.

Para que esta herramienta funcione, solo necesitas descargar la biblioteca y agrégalo al encabezado de tu sitio al igual que:

Puedes descargar un copia completa del repositorio de GitHub que también incluye especificaciones para sitios de video soportados y soporte actual del navegador.

En su mayor parte, SuperEmbed soporta todos los navegadores modernos de FireFox 3.5+, Chrome 4+ y versiones de Internet Explorer 9 o superior.

Esta es una biblioteca muy impresionante considerando todo el soporte del navegador y lo bien que funciona. trabaja directamente de la caja. Es una solución mucho más simple que los hacks CSS si estás de acuerdo con confiar en JavaScript.

Puedes encontrar más información en GitHub y puedes verlo correr en vivo en este violín.