Cómo hacer un Iframe responsivo

Cómo hacer un Iframe responsivo

Uno de los problemas típicos al insertar un iframe en una página es la de darle un tamaño variable dependiendo del contenedor, o dicho de otro modo: que tenga un comportamiento “responsivo”.

Un iframe tiene parámetros de width y height, por lo que podemos poner un porcentaje en width para que sea relativo al contendor, pero tenemos el problema que eso no lo podemos hacer en el height por lo que el aspect ratio variaria según el tamaño del contenedor lo que resulta muy molesto especialmente en un video.

Para solucionar este problema usaremos un div que contendrá el iframe

 

 

Y el CSS necesario:

 

La capa en la que “envolvemos” el iframe la posicionamos con absolute para posteriormente poder posicionar el iframe relativamente al wrapper.

El width lo pondremos con el porcentaje que nos interese respecto al contenedor de la página y el height a cero.

En el padding-bottom está la parte más interesante del div exterior. La altura la ponemos a cero por no poder poner porcentaje porque es con el padding con lo que controlaremos la altura con el aspect ratio que deseemos. En el caso del ejemplo he querido un 75%. Por ejemplo para el aspect ratio de los videos a  16:9 pondriamos un padding-bottom de 9/16 * 100 = 56.25% y para los de 4:3 de la misma forma se calcula un 75%.

El overflow a hidden para asegurarnos que no se ve nada fuera del contenedor, aunque en principio eso no tendría que suceder.
El iframe interior se posiciona a absolute (respecto al div contenedor) por lo que al poner el top y left a cero y el width y height a 100% conseguimos que ocupe todo el div exterior que está correctamente definido para ser responsivo.

 

El ejemplo anterior quedaria de esta manera al incrustarlo en esta página (cambiar el tamaño del navegador para ver cómo se adapta):

Y un ejemplo de youtube con el padding-bottom a 56.25%

La idea original del padding-bottom parece ser que proviene de este artículo.

 

3 Comentarios

  1. GRACIAS!!! TENIA AÑOS BUSCANDOLO

    Responder
  2. Muchas gracias, fuiste la solución a mis plegarias, solo el mismo Dios puso tu blog en mi camino, agradecida infinitamente… Saludos desde Venezuela…

    Responder
  3. Gracias!!! Pareciera obvio pero por algo lo buscamos. 🙂

    Responder

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *