Incruste videos receptivos fácilmente con SuperEmbed.js

La web moderna es totalmente receptiva y más diseñadores se están dando cuenta de esto todos los días. Pero hay un desafío molesto cuando se trata de diseño receptivo: contenido integrado .

Todos los sitios de videos de YouTube a Vimeo tienen un código de inserción predeterminado fijado a un determinado tamaño. Esto significa que los desarrolladores necesitan usar otras soluciones para crear videos con capacidad de respuesta completa .

Sin embargo, en lugar de utilizar una clase contenedor de CSS, puede utilizar SuperEmbed.js, una biblioteca de JavaScript gratuita para crear videos receptivos .

Este plugin resuelve dos problemas a la vez. Todos los videos incrustrados se extenderán para llenar el contenedor principal, a la vez que son lo suficientemente flexibles como para cambiar el tamaño según la ventana del navegador .

La mejor parte es que SuperEmbed.js no requiere código adicional, por lo que puede incrustar los archivos y dejarlos funcionar . Esta biblioteca de JS se ocupa del resto dirigiendo elementos integrados desde ciertos sitios .

Todos los videos mantienen sus proporciones de aspecto específicas, por lo que no debe preocuparse por las dimensiones irregulares. Y SuperEmbed funciona como una biblioteca vanisa de JS sin dependencias como jQuery.

En este momento, SuperEmbed admite más de 15 incrustaciones de video de sitios como YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me y Archive.org (entre muchos otros). Esta lista sigue creciendo, por lo que se esperan más servicios de transmisión de video a lo largo del tiempo.

Para que esta herramienta funcione, solo necesita descargar la biblioteca y agregarla al encabezado de su sitio de la siguiente manera:

Puede descargar una copia completa del repositorio de GitHub, que también incluye especificaciones para sitios de video admitidos y soporte actual del navegador .

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

Esta es una biblioteca muy impresionante teniendo en cuenta todo el soporte del navegador y qué tan bien funciona desde el primer momento . Es una solución mucho más simple que los hacks de CSS si está bien con depender de JavaScript.

Puede encontrar más información sobre GitHub y puede verla funcionando en este violín.