Aplicando los Media Queries en los vídeos con HTML5

Hace unas entradas anteriores hablamos de los recursos multimedia que tenemos en HTML5 LAS ETIQUETAS VIDEO Y AUDIO PARA MULTIMEDIA EN HTML, aunque aplicar recursos pesados como vídeos nos lleva hacia uno de los mayores líos que nos podemos encontrar al momento de optimizar el tamaño de nuestra web.

Por una parte tenemos cada vez monitores más grandes con una alta resolución para reproducir lo que sea y por otra parte queremos que nuestro sitio cargue lo más rápidamente para que el internauta pueda tener una buena experiencia con nuestra web (a menos a lo que se refiere a la carga del sitio como tal); estas dos escenarios parecen imposible de coexistir juntos, pero podemos lograr un término medio entre los dos con ayuda de los Media Queries.

Los Media Queries de CSS en HTML para los vídeos

De la mano de los Media Queries que aplicamos en CSS para adaptar secciones de nuestra web para distintos tamaños de pantalla vienen los Media Queries aplicables mediante el atributo media en el fuente (source) de nuestros vídeos para cargar vídeos según las especificaciones de cada dispositivo:

    <video controls>
     <source src="video-1024.mp4" media="(min-device-width: 1200px)">
     <source src="video-640.mp4">
    </video>

Como podemos ver, se aplica la misma sintaxis que en el CSS; de tal forma podemos especificar que los dispositivos con mayor resolución carguemos los vídeos de mayor resolución (más grandes) y en cambio los dispositivos de menor resolución especifiquemos los vídeos de menor resolución (más pequeños).

Repasemos un poco los operadores disponibles que tenemos para emplear en este atributo:

Operadores de los Media Queries

Valor	Descripción
and	Operador AND
not	Operador NOT
,	Operador OR

Recordando que podemos especificar distintos vídeos según el dispositivo que esté empleando el usuario; entre los principales tenemos:

Dispositivos de los Media Queries

Value	Description
all	Para todos los dispositivos.
print	Para modos de vista de impresión.
screen	Para pantallas de computadora.
tv	Para pantallas de televisión.

Además podemos aplicar algunos valores; entre los más empleados tenemos:

Valores de los Media Queries

Valor	Descripción
width	Especifica el ancho del área de visualización (generalmente se emplea con los prefijos "min-" y/o "max-").
height	Especifica el largo del área de visualización (generalmente se emplea con los prefijos "min-" y/o "max-").

Puedes ver la documentación completa en el siguiente enlace: HTML media Attribute.

La mala noticia: actualmente no hay navegador que soporte los Media Queries

Aunque desgraciadamente parece ser que aún no existe compatibilidad con este atributo en ninguno de los navegadores web más populares como podrás darte cuenta en la sección "Browser Support" del enlace anterior; por lo tanto habrá que esperar futuras versiones de nuestros navegadores para la inclusión de la misma.

Videos responsive en pantallas

Ahora le traemos una solución para que al momento de insertar vídeos en nuestro blog o web se vean correctamente; cuando queremos insertar un video por ejemplo de YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KfcI5pNJEbM?autoplay=1" frameborder="0" allow="autoplay"></iframe>

Tenemos un tag como el mostrado anteriormente; un iframe en pocas palabras con unas medidas fijas, lo cual nos trae varios problemas, ya que con estas medidas nuestro video no se adapta al tamaño de nuestra web y nuestra web va por un lado y el video va por otro y por lo tanto, nuestro video se distorsiona en algunas pantallas; para hacer los vídeos responsivos te traemos la siguiente entrada:

Responsive Design en nuestra web: adapta imágenes y vídeos

En esta sección, como hablamos sobre la estructura de un sitio Responsivo, que consiste en que nuestras imágenes y vídeos se vean correctamente en cualquier pantalla; para eso en muchos casos necesitamos aplicar los media_queries y también emplear los porcentajes sobre estos recursos claves en nuestra web.

Adaptar las imágenes a las pantallas

Ahora vamos a ver cómo adaptar las imágenes en nuestra página web; tenemos varias factores que podemos tomar en cuenta para tal fin como veremos en la siguiente clasificación.

El ancho de la imagen igual al de la web: Esta es la configuración más sencilla que podemos establecer; estamos indicando que el tamaño máximo de nuestra imagen corresponderá al a de su elemento padre que sería la web; para eso debemos indicar la siguiente regla en CSS:

img { 
width:100%; 
}

Tamaño máximo de la imagen:Con esta configuración podemos extender nuestra imagen de manera progresiva según lo que ocupe el contenedor hasta un límite; esto es un pequeño truco, que establecemos el tamaño máximo que tendrá nuestra imagen, de esta forma podemos evitar comportamientos indeseables como cuando se supera el tamaño máximo de nuestra imagen, por ejemplo 500px como vemos a continuación:

img {
width:100%;
max-width:500px;
}

Como podemos ver con unas sencillas reglas podemos adaptar nuestras imágenes para que sean responsive con el resto del cuerpo HTML de nuestra página web; podemos aplicar estas imágenes como fondo o background, en donde prácticamente no tendríamos ningún otro contenedor padre atrás de las mismas, o podemos aplicarlas en alguna sección clave de nuestro contenido, como lo es el container en Bootstrap para ajustar las imágenes a nuestro contenedor y de esta forma hacerlas autoajustables.

También recuerda que si lo que quieres es ajustar una imagen tanto en lo alto como lo ancho de un contenedor y que esta no se distorsione, recuerda que está la propiedad object-fit como mostramos en una entrada anterior; una forma interesante de que cuando expandas tu imagen puedes cubrir todo el contenedor padre, es decir, el contenedor que lo contiene.