adaptar imágenes y vídeos en blogger

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, como hacer que se adapten a distintos tipos de pantalla los contenidos multimedia.



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:

Ocupar el ancho de la página: puede ser útil para cabeceras o imágenes principales y lo haremos estableciendo su ancho al 100%.

img {
 width:100%;
}

Tener una imagen con un tamaño máximo: en este caso la imagen tendrá un tamaño que no sobrepasará, pero cuando se disminuya el tamaño del contenedor se encogerá adaptándose a la página y nos puede servir de ejemplo usarla para un blog, donde puede que usemos en alguna ocasión una imagen un poco más grande (por ejemplo una infografía) y no queremos ni hacerla más estrecha ni recortarla.

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

Tener las imágenes con su tamaño original: y en este último caso puede que tengamos una serie de imágenes de distintos tamaños y queremos conservar sus tamaños originales pero que se adapte al ancho del contenedor o de la pantalla y como en el caso anterior nos puede servir para un blog con un diseño adaptativo o con versión móvil (ya que se varían igual en la versión de escritorio y adaptaría al ancho en la móvil).

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í.

Adaptar el vídeo al ancho total de la página (recordemos que esto también se puede poner en práctica en web móviles, por lo que no sería un problema que se hiciese muy grande):

video {
 width:100%;
}

Ahora haremos que tenga el tamaño máximo que queramos y cuando no coja en la página se hará más pequeño:

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:

Tenemos que hacer que se redimensione el contenedor del vídeo para que conserve el ratio (o relación entre el alto y el ancho), y aquí tenemos que poner en práctica un “truquito“ (que podría ser tachado de chapucero, pero a falta de algo mejor nos sirve y si alguien conoce otra forma con CSS que no dude en comentarla), y el método consiste en meter el <iframe> dentro de una etiqueta <div> que tendrá un alto de 0px y un ancho del 100% y el truco para que tenga el tamaño del vídeo es usar su padding-top y establecer el valor porcentual de su ratio de imagen, que suele ser 16:9, voy a poner varias relaciones:

#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%

Lo que hemos hecho anteriormente solo es para la etiqueta <div> (si os estáis perdiendo ahora veréis el CSS con la explicación de las cosas), teniendo esta etiqueta que sabemos que se va a adaptar para tener el ratio adecuado debemos de hacer que el <iframe> flote encima de la etiqueta anterior y adopte su alto y su ancho (estableciendo su alto y ancho al 100% y su posición como absolute).

Por último, si queremos que nuestro vídeo no ocupe el 100% del ancho de la página o contenedor en el que se encuentra (y además se centre en la página) debemos delimitarlo con otra etiqueta <div> que tendrá el ancho máximo que deseemos y un margen automático que hará que se centre correctamente.

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="http://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.