Urielmania

“El Mundo de Uriel… Pero la voz de todos”

Cómo hacer un iframe responsive CSS

Servicios  como YouTube, Googlemaps o SoundCloud, utilizan el elemento <iframe> para insertar el contenido en otras webs.

Y si bien esto no esta mal , lo cierto es que en los días que corren, dónde el diseño adaptativo es más una obligación que una opción, nos encontramos que tenemos que hacer el <iframe> también responsive.  Y si bien ahorita aplicamos la solución a este elemento hay que decir que  también es aplicable a elementos <video> y a los ya menos utilizados <object> y <embed>.

Lo primero que tenemos que saber es que el elemento <iframe> necesita obligatoriamente los atributos width y height. Ya que si no los tiene este elemento simplemente desaparecerá.

Y si bien tu primer instinto al tratar de maquetar es hacer lo mismo que se haces 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.

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. Llegariamos 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 claro deberíamos poner 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: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>'; }

La verdad una alternativa que aunque ya tiene unos ayeres la verdad sigue muy buena que vi en:

Acerca del Autor