Integración de video receptivo en sus diseños web

Diseño web adaptable se ha convertido en la norma, ya que se espera que las aplicaciones y los sitios web modernos se adapten y encajen en diferentes tamaños de pantalla. Proporciona una experiencia de visualización óptima a los usuarios, independientemente del dispositivo, el tamaño de la ventana, la orientación o la resolución. Contenido, imágenes y los videos deben ser lo suficientemente fluidos para adaptarse a diferentes ventanas gráficas. Los sitios web se pueden ver en una variedad de dispositivos. La lista de dispositivos que los usuarios emplean para mirar videos en su plataforma es interminable: teléfonos, computadoras portátiles y iPads, por nombrar algunos. En última instancia, no tiene influencia sobre cómo las personas verán sus videos o sus sitios web. Claro, puede restringir a los usuarios a un determinado dispositivo, navegador u orientación (horizontal o vertical). Pero haz eso y perderás fácilmente a tu audiencia. Es posible que esté familiarizado con el concepto de Imágenes de responsivo y dirección artística. Estos conceptos brindan a los desarrolladores el poder de hacer que las imágenes se escalen de manera receptiva de una manera que evite la distorsión y permita la entrega de contenido específico en varios dispositivos, resoluciones, ventanas gráficas y orientaciones. Si eres nuevo en este concepto, consulta el excelente artículo escrito por eric portis en imágenes sensibles en la práctica. Tener este conocimiento sobre imágenes receptivas significa que ya posee el arsenal para diseñar adecuadamente sus sitios web con las especificaciones adecuadas para satisfacer las expectativas de los visitantes. Pero, ¿y los vídeos? ¿Tus videos también son responsivos? No deje que la elección de dispositivos de sus usuarios lo tome por sorpresa. Ser el Samuel L Jackson de cada situación, especialmente en lo que se refiere a la capacidad de respuesta de tus videos. ¡Vamos a sumergirnos! ¿Cuántos de ustedes han incrustado videos de YouTube o Vimeo en su sitio? Supongo que todos, bueno… casi todo el mundo. De manera predeterminada, es posible que espere que estos videos incrustados respondan, pero ¿realmente lo son?

Estudio de caso de inserción de video

Tome un video de YouTube de muestra, por ejemplo https://www.youtube.com/watch?v=y5-hH8DnqMk. Tome el código de inserción de la página e insértelo en una página html de esta manera:

< !DOCTYPE html>
    


    

Resultado: ¡No responde! ¿Cómo hacemos que este video incrustado responda? En nuestro ejemplo aquí, usamos YouTube. Pero podría ser de cualquier otro alojamiento de videos plataforma, como Vimeo.

Soluciones receptivas

Hay un par de maneras de hacer que sus videos respondan en sus sitios web. Echemos un vistazo a los trucos de CSS y JavaScript disponibles para crear videos receptivos.

FitVids.js

Este es un complemento jQuery liviano y fácil de usar para incrustaciones de video de ancho fluido. Fue desarrollado por Chris Coyier y Paravel. Este complemento automatiza el método de la razón intrínseca de Thierry Koblentz para lograr videos de ancho fluido. Envuelve cada video en un div.fluid-width-video-wrapper y aplica el CSS necesario. Después de la primera llamada de JavaScript, el CSS se hace cargo y realiza la capacidad de respuesta. Intentemos hacer que nuestro estudio de caso de inserción de video responda con esta solución propuesta. Solución Codepen aquí: https://codepen.io/team/Cloudinary/pen/aWNpjE

Echemos otro vistazo a las soluciones de CSS puro para hacer que los videos respondan.

Fluidvids.js

Fluidvids.js fue desarrollado por Todd Motto. Apunta al iframe, verifica la fuente del video y también aplica el método de la razón intrínseca para realizar un cálculo de relación de aspecto. La ventaja de este script es que no depende de ningún complemento, biblioteca o script de terceros. Con secuencias de comandos mínimas, permite una representación más rápida y un rendimiento mejorado. Intentemos hacer que nuestro estudio de caso de inserción de video responda con esta solución propuesta. Solución Codepen aquí: https://codepen.io/team/Cloudinary/pen/Wjwpwo

Fundación ZURB

La Fundación ZURB ideó una solución CSS que es increíblemente fácil de usar. Con flex-video, puede crear automáticamente una proporción intrínseca que escalará correctamente su video en cualquier dispositivo. Requiere que uses el marco de la fundación. Intentemos hacer que nuestro estudio de caso de inserción de video responda con esta solución propuesta. Solución Codepen aquí: https://codepen.io/team/Cloudinary/pen/gWrmLp

CSS básico

No queremos involucrar ningún marco CSS. ¿Cómo lo hacemos receptivo usando Vanilla CSS? Queremos que el video responda sin ninguna solución mágica. Muchas gracias a Thierry Koblentz por inventar esta técnica. Se le ocurrió la idea de usar proporciones intrínsecas para video. Con dimensiones intrínsecas, un nuevo ancho desencadena un nuevo cálculo de altura, lo que permite que los videos cambien de tamaño y les da la capacidad de escalar de la misma manera que las imágenes. Muchas de las otras soluciones de marcos y complementos de CSS utilizan esta técnica bajo el capó para implementar la capacidad de respuesta de video en el diseño web. Lo primero que debemos hacer es envolver el video incrustado en un div y darle una clase como esta:

Ahora que hemos envuelto el iframe dentro de un contenedor div, necesitamos darle a los elementos secundarios del envoltorio de video (el iframe, el objeto y la inserción) un ancho y alto del 100 % para que se expandan al ancho completo del envoltorio, así:

.video-wrapper iframe,  
.video-wrapper object,  
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ahora, agreguemos estilo a la envoltorio de video clase así:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

Nota: los fondo acolchado La propiedad es en realidad muy importante para hacer que esta técnica funcione según la relación entre la altura y el ancho de su video. ¡El 56,25 por ciento es para una proporción de 16:9, el 74,25 por ciento es para una proporción de 4:3 y el 50 por ciento es para una proporción de 16:10! Solución Codepen aquí: https://codepen.io/team/Cloudinary/pen/XRdMRY

Una implementación similar se puede encontrar en este publicar en el blog de nosecreek.

Estudio de caso de vídeo HTML5

Además de usar los códigos de inserción de video que se cargan usando un iframe, también puede usar el conocido HTML5 video elemento. ¿Cómo haces que tus videos respondan en este caso? Afortunadamente para los desarrolladores, es bastante fácil. Simplemente lo diseñas configurando el ancho máximo en 100 por ciento y la altura a auto. Así es exactamente como funciona para Imágenes de responsivo también. Comprobemos eso. Solución Codepen aquí: https://codepen.io/team/Cloudinary/pen/qmZrXv

Entra Nublado

Con Cloudinary, puede cambiar el tamaño y recortar videos para que coincidan con el diseño de su sitio web. Ya sea que los videos se carguen en su código del lado del servidor o por sus usuarios, los originales se almacenan en la nube. A continuación, puede crear de forma dinámica varios vídeos redimensionados, recortados y manipulados sobre la marcha y entregarlos a través de URL dinámicas, o utilizar código para añadir etiquetas de vídeo o crear URL de vídeo. Cloudinary le permite cambiar el tamaño de un video con los parámetros de ancho y alto, representados como w y h en URL. Obtener programáticamente el ancho y el alto de la ventana gráfica del navegador y pasarlo a la URL puede hacer que sus videos respondan automáticamente a medida que el usuario cambia entre diferentes tamaños y resoluciones de dispositivos. Por ejemplo, puede cambiar el tamaño de un video cargado a un cierto ancho y alto de la siguiente manera:

También puede cambiar la altura manteniendo la relación de aspecto de la siguiente manera:

c_fit

Mientras conserva la relación de aspecto original, puede cambiar el tamaño de un video para que se ajuste a un ancho y alto determinados. Por ejemplo, este video a continuación se ajusta a un ancho y alto de 150 píxeles mientras conserva la relación de aspecto usando c_fit.

Conclusión

Hemos destacado diferentes soluciones que puede usar para lograr videos receptivos según su caso de uso y proyecto web. Sus usuarios deberían poder acceder a su contenido desde prácticamente cualquier tipo de dispositivo, navegador y sistema operativo. Pero no se trata solo del acceso, los videos también deben estar bellamente representados. El video receptivo también lo ayuda a lograr ese objetivo. Para obtener más información o registrarse para obtener una cuenta y probar estas funciones, visite el sitio web nuboso. (Descargo de responsabilidad: esta publicación está patrocinada por Cloudinary).