A todos nos ha pasado, un cliente necesista , no sabemos por qué razón, un iframe en su página web. Los sudores y lágrimas llegan cuando descubrimos que el <iframe> necesita obligatoriamente unos valores de width y height, porque sin ellos simplemente no se ve.

Una vez puestos, descubrimos con más lágrimas en los ojos, que nuestro iframe no es responsive. Nuestro primer impulso sería ponerle un ancho de 100% y un alto automático, y esto funciona relativamente bien hasta que nos damos cuenta que la altura se descuajeringa.

¿la solución?

Necesitamos que nuestro video no solo se adapte al ancho, sino que además mantenga el aspect ratio. Para ello deberíamos meter  el <iframe> en un <div> y añadir un position absolute al iframe.

El aspect ratio del video lo mantendremos poniéndole al <div> una altura de 0px y añadiéndole un padding-bottom  porcentual que será  del 75% para videos de 4:3 y un padding bottom de 56.25% para videos de 16:9. La cosa sería así:

<style>

. container {

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    overflow: hidden;

}

.container iframe {

    position: absolute;

    top:0;

    left: 0;

    width: 100%;

    height: 100%;

</style>

<div class="container">

    <iframe width="560" height="315" src="https://www.youtube.com/watch?v=7L45H0ka4NI" frameborder="0" allowfullscreen></iframe>

</div>

¿y que pasa cuando no es un video?

Cuando  nuestro iframe no es un  video y por tanto no tiene un aspect radio que mantener. La manera más sencilla es utilizar los media query de CSS3.

iframe {

  width: 100px;

  height: 50px;

}

/* Pantallas de 320px o superior */

@media (min-width: 320px) {

  iframe {

    width: 200px;

    height: 150px;

  }

}




/* Pantalla 768px o superior */

@media (min-width: 768px) {

  iframe {

    width: 500px;

    height: 350px;

  }

}