Responsive Design: adaptar imágenes y vídeos

Como comenté en el artículo sobre la estructura básica del Responsive Design, un diseño adaptable deja de serlo si cuando lo visualizas desde un móvil ves que las imágenes y los vídeos sobresalen de la página, por lo que os voy a enseñar como hacer que se adapten a distintos tipos de pantalla los contenidos multimedia (imágenes y vídeos de HTML5, Youtube y Vimeo).

Las formas que comentaré para adaptar imágenes y vídeo son básicas y probablemente en algunas ocasiones se necesite hacer un diseño más específico que podremos hacer con @media queries, pero el lado positivo de estos métodos es que son adaptables al ancho del contenedor, independientemente del ancho de pantalla (por lo que en ciertos tamaños puede que nos venga bien hacer un contenedor principal y una barra lateral y el vídeo que esté en el contenedor se adaptará a el, por ejemplo).

Adaptar imágenes

Para crear diseños muy optimizados puede ser importante usar varias imágenes distintas, una con un tamaño superior y otra con uno más ligero, pero me voy a centrar en el uso de una misma imagen (que en la medida de lo posible debería de estar optimizada) y se adaptará como nosotros queramos, pudiendo hacer que se comporten de las siguientes formas las imágenes:

img {
    width:100%;
}

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

img {
    max-width:100%;
}

Os voy a poner como ejemplo la galería de webs de CSS-Tricks, que en anchos grandes divide las imágenes en tres columnas y sino en una sola, pero siempre se adaptan al 100% del ancho de su contenedor.

Adaptar vídeos

Cuando queremos adaptar vídeos tenemos dos tipos de vídeos que adaptar, el primer tipo son los vídeos de HTML5 (para el que no sepa de que va esto en Genbeta Dev tenemos un artículo que cuenta como usarlo y las compatibilidades) y por otro lado los vídeos de servicios externos que debemos de incrustar su código, que normalmente es un <iframe> (servicios como YouTube, Vimeo…)

HTML5

En este caso no hay ningún tipo de complicación, es como si usásemos un elemento <img>, es decir, podemos aplicar todo lo que he explicado antes para tratar un elemento <video>, pero pondré un par de métodos aún así.

video {
    width:100%;
}

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

Servicios externos (Yotutube, Vimeo…)

Al usar este tipo de vídeos con etiquetas <iframe> se complica mucho más el poder hacer que se adapten estos vídeos, y para conseguirlo hay que hacer todo un ritual (esperemos que HTML5 se imponga rápido ante este tipo de vídeos).

En este caso tenemos dos opciones, la primera es que el vídeo de adapte al ancho del contenedor (no sería demasiado grande si usase un ancho “estándar” como usa por ejemplo Genbeta Dev, 640 píxeles que se puede decir que es lo normal) y por otro lado podemos limitar el ancho a uno específico.

Os voy a explicar las cosas que tenemos que tener en cuenta para que funcione bien:

#Dividiremos el alto entre el ancho, y el padding-top se adaptará según esta relación al ancho
16:9    ---> 9/16*100    = 56,25%
4:3 ---> 3/4*100     = 75%

El código necesario

Como he comentado antes para que se centre el vídeo y no se expanda al 100% de la página sin límite debemos de meterlo en un contenedor (que su clase será llamada delimitador"), si queréis hacer que se adapte al 100% sin limite no le añadáis, pero lo que contiene si.

El ejemplo del código lo voy a hacer con dos vídeos juntos, uno encima del otro de Youtube y Vimeo y como no nos serviría de mucho añadirlo aquí, podéis probar en forma de ejemplo los tres vídeos, que por desgracia no he encontrado ninguna web que adapte sus vídeos de esta forma.

<div class="delimitador">
    <div class="contenedor">
        <iframe src="https://www.youtube.com/embed/wMhL_QIyD1k?rel=0"></iframe>
    </div>
    <div class="contenedor">
        <iframe src="http://player.vimeo.com/video/52553020"></iframe>
    </div>
</div>

Y el código CSS es el siguiente:

/* Podemos eliminar este estilo si no queremos que se adapte al ancho máximo */
.delimitador{
    width:560px;    /* Ancho máximo */
    margin:auto;    /* Centramos el vídeo */
}
/* El contenedor con el padding-top crea el tamaño del vídeo */
.contenedor{
    height:0px;
    width:100%;
    padding-top:56.25%; /* Relación: 16/9 = 56.25% */
    position:relative;
}
/* El iframe se adapta al tamaño del contenedor */
.contenedor iframe{
    position:absolute;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
}

Resumen

Hay algunas cosas que no son tan fáciles de hacer para que se adapten a todo tipo de pantalla, pero se puede acabar consiguiendo y os recomiendo si vais a poner en práctica alguno de estos métodos para hacer que se visualicen bien estos elementos multimedia en todo tipo de pantalla es que creéis el CSS necesario para hacerlo y lo dejéis siempre accesible para que os resulte más fácil adaptar todo.

En Genbeta Dev | Introducción al Responsive Design