Como conseguir iFrames responsive - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu

El mejor truco para conseguir iframes responsive, es hacer un div o caja que respete o guarde la relación de aspecto.

Los monitores de ordenador de sobremesa habitualmente usan la relación de aspecto: 
     ✔️ 16/9 o 21/9

 en monitores ultraanchos es de:
    ✔️ 32/9

y en portatiles  es de
    ✔️ 3/2 o 16/10 

responsive iframe diagram

Una vez aclarado este concepto, vamos a detallar los pasos a seguir.

Procedimiento:

1 - Creo una sección y dentro añado un codeblock

Añadir un codeblock

     en el codeblock inserto el código del iframe, en PHP&HTML

zona PHP&HTML

2 - A continuación al codeblock le damos una clase llamada por ejemplo '.iframe-container'.

Añadir una clase

3 - Ahora voy a estilos globales de Oxygen y añado una nueva hoja de estilos

         Manage > Stylesheets

Añadir hoja de estilos


    y dentro de creo una nueva hoja de estilos e insertamos dentro  el siguiente código:


  :root {
	--aspect-ratio: 16/9;
  }

  .iframe-container {
	position: relative;
	width: 100%;
  }

  .iframe-container::before {
	content: "";
	display: block;
	padding-bottom: calc(100% / (var(--aspect-ratio)));
  }

  .iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }

Click para Copiar
img-8
Copiado

Explicación del código:

Bloque1
*******
Lo primero de todo, defino una variable CSS que almacene la relacion de aspecto en la pseudoclase root.


:root {
  --aspect-ratio: 16/9;
}

Click para Copiar
img-9
Copiado

Bloque2
*******
A continuación lo que necesito es un div o elemento padre con posicionamiento relativo y que ocupe el ancho de la pantalla


.iframe-container {
   position: relative;
   width: 100%;
}

Click para Copiar
img-10
Copiado

Bloque3
*******
Ahora, para que el div o elemento padre adquiera la altura perfecta y se adapte a la altura de su hijo en este caso el iframe, creamos un pseudoelemento que represente a ese primer hijo para empujarlo a esa altura en función de la relación de aspecto definada en la variable css ya declarada anteriormente.

Como inicialmente ese pseudoelemento que representa a ese primer hijo no tiene contenido le defino como vacio.


.iframe-container::before {
	content: "";
	display: block;
	padding-bottom: calc(100% / (var(--aspect-ratio)));
}

Click para Copiar
img-11
Copiado

La altura desea puedo aplicarla en el padding-bottom o en el padding-top, el resultado va a ser exactamente el mismo.

   padding-bottom: calc(100% / (var(--aspect-ratio))); 

      ó

   padding-top: calc(100% / (var(--aspect-ratio))); 


El empujar el elemento al tamaño correcto en funcion de la relacion de aspecto, es un sistema mucho mejor que forzar  de entrada una cierta altura fija.

De esta forma,en el caso de que el contenido interior sea más alto de lo que representa la relación de aspecto, aún puede crecer en lugar de desbordarse.

Bloque4
*******
El iframe, en este caso es el elemento secundario o hijo dentro de él padre, le hemos de aplicar un posicionamiento absoluto para rellenar el área del padre, y le damos un ancho y un alto del 100% para que crezca guardando la relacion de aspecto dada al principio.


.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Click para Copiar
img-12
Copiado

Listo, de esta forma ya conseguimos un iframe totalmente responsive.

Logo Oxygenados