Un iframe es un fragmento de otra web que insertamos en nuestra web montada con GESIO®. Principalmente los usaremos para incluir videos de youtube, de vimeo, mapas de Google,...
El principal inconveniente que nos topamos al trabajar con estos objetos es que los definimos previamente con unas dimensiones fijas, lo cual puede ser un problema si queremos incluir este contenido en distintas zonas de nuestra web o si hemos realizado un diseño responsive en nuestra página y este objeto externo no se adapta al redimensionado de su contenedor, rompiendo la estructura del site.
Para poder hacer este objeto extenno responsive necesitaremos en primer lugar meterlo dentro de una capa contenedora que, en nuestro ejemplo, le vamos a aplicar la clase .contenedor-responsive. Este contenedor nos servirá para contener un objeto de unas dimensiones o aspect-ratio concretas, pero podremos crear otras tantas clases que solo modifiquen este aspecto para cuantos elementos externos de diferentes dimensiones queramos incluir en nuestra web. Tendríamos algo así:
EL CSS
En primer lugar crearemos los estilos que afectarán al contenedor del iframe:
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
Esto es lo que hace este código:
- Definimos position como relative para poder hacer un posicionamiento absoluto del iframe que contendrá esta capa.
- Padding-bottom definirá el alto del contenedor. Para que este se adaote a las dimensiones del objeto inserto realizaremos el siguiente cálculo: Height / Width x 100. En este caso tendríamos 315 / 560 = 0,5625 x 100 = 56,25%
- Dejamos la altura a 0, ya que esta vendría determinada por el pading-bottom.
- Finalmente ocultaremos el contenido que pudiese rebasar el contenedor definiendo overflow: hidden.
A continuación aplicaremos estilos al objeto contenido:
.contenedor-responsive object,
.contenedor-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- En primer lugar definimos la posicion como absoluta, lo que nos permite posicionar el elementos desde el punto 0,0 de la capa contenedora.
- Los valores de top y left posicionan esta capa, en este caso en el punto 0,0 de la capa contenedora.
- Por último definimos el ancho y alto de este objeto que deberá ser 100% en ambos casos para que ocupe la totalidad de espacio disponible.
Et voila! ya podemos incluir nuestro objeto externo en cualquier zona de nuestra web GESIO® con la absoluta confianza en que este objeto se adaptará a sus dimensiones.