Cómo hacer un iframe responsive

Muchos servicios multimedia, como YouTube o SoundCloud, utilizan el viejo elemento <iframe> para insertar el contenido en otras webs. Y que conste que digo “viejo” con todo el cariño. En los días que corren dónde el diseño adaptativo es más una obligación que una opción, tenemos que hacer el<iframe> también responsive. La solución basada en CSS que veremos en este post es también aplicable a elementos <video> y a los ya menos utilizados<object> y <embed>.

Lo primero que tenemos que saber es que el elemento <iframe> necesitaobligatoriamente los atributos width y height. Por ejemplo, este es el código que me ha dado YouTube para un vídeo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/eZJMzAHa-uQ" frameborder="0" allowfullscreen></iframe>

Si quito los atributos width y height, el iframe desaparecerá. Compruébalo.

Se te puede pasar por la cabeza hacer lo mismo que se hace con imágenes y otros elementos tipo block para que sean responsive: aplicar una anchura máxima del 100% y una altura automática. Por ejemplo:

iframe {
    max-width: 100%;
    height: auto;
}

Esto tampoco funcionará. Puede ser un apaño pero la altura (height) automática no se aplica correctamente en elementos iframe y, por otro lado, si ponemos un height fijo el resultado es un iframe que no mantiene las proporciones (aspect ratio) y el contenido puede aparecer deformado.

Solución: mantener el aspect ratio constante

Se necesita una solución que no sólo se adapte a diferentes tamaños de pantalla sino que mantenga el aspect ratio. Las soluciones más difundidas en Internet parecen venir todas de Creating Intrinsic Ratios For Video, de Thierry Koblentz, con ligeras variaciones.

Básicamente la solución consiste en poner el <iframe> dentro un div contenedor y posicionar el iframe de forma absoluta respecto a este contenedor. Para mantener el aspect ratio, a este contenedor se le da una altura de cero y un padding-bottom en porcentaje en función del aspect ratio. Por ejemplo, 75% para un aspect ratio 4:3 y 56.25% para un aspect ratio 16:9. Estos son los dos aspect ratios más utilizados pero puedes usar cualquier otro: simplemente haz una regla de tres que te diga el porcentaje que representa la altura en relación a la anchura. Por ejemplo, para un aspect ratio 3:2 sería (2/3)*100 = 66.66%.

Al poner ese porcentaje como padding-bottom y una altura cero, se mantiene el aspect ratio y damos el espacio necesario para el iframe que posicionaremos de forma absoluta dentro del contenedor. Utilizando el iframe que nos dio YouTube y que puse al principio llegaríamos a este markup:

<div class="embed-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/eZJMzAHa-uQ" frameborder="0" allowfullscreen></iframe>
</div>

Y este CSS:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Con esto tendríamos nuestro iframe con una proporción 16:9 totalmente responsive. Si quisiéramos un aspecto ratio 4:3 bastaría cambiar el padding-bottom del contenedor a 75%. O podríamos crear clases diferentes para cada aspect ratio:

.embed-container {
    position: relative;
    height: 0;
    overflow: hidden;
}
.16by9 {
    padding-bottom: 56.25%;
}
.4by3 {
    padding-bottom: 75%;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Aunque he utilizado como ejemplo el iframe de un vídeo de YouTube, puedes utilizarlo para cualquier otro servicio que utilice iframes para insertar contenido, como SoundCloud, Vimeo, Google Maps y, en general, cualquier iframe cuyo contenido necesite mantener un aspect ratio fijo.

Consejo: Si utilizas WordPress puedes utilizar el filtro embed_oembed_html para añadir el marcado HTML que hemos descrito a los elementos insertados mediante oEmbed. Por ejemplo:

add_filter( 'embed_oembed_html', 'cyb_oembed_html' );
function cyb_oembed_html( $output ) {
    return '<div class="embed-container 16by9">' . $output . '</div>';
}

Soluciones basadas en JavaScript

Si no puedes o no quieres utilizar CSS, no puedes controlar que los editores añadan el markup o cualquier otra de esas situaciones que escapan de las manos del desarrollador web, puedes pensar en utilizar una solución basada en javascript. No te voy a poner código aquí pero te voy a recomendar los dos proyectos listos para ser utilizados más populares: FluidVids (standalone) yFitVids (plugin para jQuery).

iframe responsive con aspect ratio variable

Además de los contenidos multimedia de terceros, el iframe se puede utilizar para miles de cosas más y mantener el aspect ratio no siempre es lo que necesitamos (y si no que se lo pregunten a Jose Corbalán, mira su comentario). No hay nada más que hacer que utilizar la técnica más básica del diseño responsive: utilizar media queries para definir la anchura y altura del iframe para cada tamaño de pantalla. Por ejemplo:

/* CSS general */
.mi-iframe {
  width: 100px;
  height: 50px;
}

/* CSS pantallas de 320px o superior */
@media (min-width: 320px) {

  .mi-iframe {
    width: 200px;
    height: 150px;
  } 

}

/* CSS pantalla 768px o superior */
@media (min-width: 768px) {

  .mi-iframe {
    width: 500px;
    height: 350px;
  } 

}

fuente:http://cybmeta.com/como-hacer-un-iframe-responsive