Integración de videos receptivos en sus diseños web

Integración de videos receptivos en sus diseños web

Diseño web adaptable se ha convertido en la norma, ya que se espera que las aplicaciones modernas y los sitios web 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, imagenes 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 ver videos en su plataforma es interminable: teléfonos, computadoras portátiles y iPads, por nombrar algunos. En última instancia, no tiene ninguna 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 sensibles y dirección artística. Estos conceptos brindan a los desarrolladores el poder de hacer que las imágenes escalen de manera receptiva de una manera que evita la distorsión y permite la entrega de contenido específico a través de varios dispositivos, resoluciones, vistas y orientaciones. Si es nuevo en este concepto, consulte el excelente artículo escrito por Eric Portis sobre imágenes receptivas 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, ¿qué pasa con los videos? ¿Tus videos también son receptivos? No dejes que la elección de dispositivos de tus usuarios te tome por sorpresa. Ser el Samuel L. Jackson de cada situación, especialmente con respecto 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 todos. De forma predeterminada, podría esperar que estos videos incrustados respondan, pero ¿realmente lo son?

Estudio de caso de inserción de video

Tome un video de muestra de YouTube, 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 así:

< !DOCTYPE html>
    


    

Resultado: ¡No responde!

¿Cómo hacemos que este video incrustado sea receptivo? En nuestro ejemplo aquí, usamos YouTube. Pero podría ser de cualquier otro alojamiento de video plataforma, como Vimeo.

Soluciones receptivas

Hay un par de formas de hacer que sus videos sean receptivos 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 relació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, 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 Pure CSS para hacer videos receptivos.

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 relació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 plugin, biblioteca o script de terceros.

Con un mínimo de secuencias de comandos, 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 desnudo

No queremos involucrar ningún marco CSS. ¿Cómo lo hacemos receptivo usando CSS vainilla? Queremos que el video sea receptivo sin ninguna solución mágica.

Muchísimas gracias a Thierry Koblentz por idear esta técnica. Se le ocurrió la idea de usar proporciones intrínsecas para video. Con dimensiones intrínsecas, un nuevo ancho activa un nuevo cálculo de altura, lo que permite que los videos cambien de tamaño y les brinde la capacidad de escalar de la misma manera que las imágenes.

Muchas de las otras soluciones de complementos y marcos 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 así:

Ahora que hemos envuelto el iframe dentro de un contenedor div, necesitamos dar los elementos secundarios de la envoltorio de video (el iframe, el objeto y el incrustado) un ancho y alto del 100% para que se expandan a todo el ancho de la envoltura, así:

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

Ahora, agreguemos estilo al envoltorio de video clase así:

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

Nota: El fondo acolchado La propiedad es realmente clave para hacer que esta técnica funcione dependiendo de la relación entre la altura y el ancho de su video. El 56,25 por ciento corresponde a una proporción de 16: 9, el 74,25 por ciento corresponde a una proporción de 4: 3 y el 50 por ciento corresponde a una proporción de 16:10.

Solución Codepen aquí: https://codepen.io/team/Cloudinary/pen/XRdMRY

Se puede encontrar una implementación similar en este publicar en el blog de nosecreek.

Estudio de caso de video 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 logras que tus videos respondan en este caso?

Afortunadamente para los desarrolladores, es bastante fácil. Simplemente le da estilo configurando el ancho máximo en 100 por ciento y la altura a auto. Así es exactamente como funciona para imágenes sensibles también. Veamos eso.

Solución Codepen aquí: https://codepen.io/team/Cloudinary/pen/qmZrXv

Ingrese Cloudinary

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.

Luego, puede crear dinámicamente múltiples videos redimensionados, recortados y manipulados sobre la marcha y entregarlos a través de URL dinámicas, o usar código para agregar etiquetas de video o crear URL de video.

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 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 subido a un cierto ancho y alto de esta manera:


También puede cambiar la altura manteniendo la relación de aspecto así:

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 utilizar 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 de acceso, los videos también deben estar bellamente renderizados. El video receptivo también lo ayuda a lograr ese objetivo.

Para obtener más información o para registrarse para obtener una cuenta y probar estas funciones, visite el Sitio web de Cloudinary.

(Descargo de responsabilidad: esta publicación está patrocinada por Cloudinary).

#Integración #videos #receptivos #sus #diseños #web

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.