Hay veces que, por necesidades del proyecto, es necesario incrustar una web dentro de otra.
O, lo que seguramente te resulte algo más familiar, incrustar un mapa de Google Maps con una localización concreta.
Y para esto se recurre a los iframes.
Si ya sabes de qué elemento te hablo, quédate para saber cómo solucionar uno de sus mayores inconvenientes con el plugin de esta semana: Responsive iframe.
¿Cómo usar Responsive iframe?
¿Qué es Responsive iframe?
Seguro que ya sabes qué inconveniente vamos a solucionar.
Responsive iframe nos permite incrustar una web con un bloque en nuestro editor con la ventaja de que se va a adaptar al elemento padre, es decir, al contenedor.
Su uso es muy sencillo. Después de instalarlo sólo tenemos que buscar el bloque de Responsive iframe y por defecto nos mostrará nuestra web.
Después sólo tendremos que modificar las opciones del plugin.
- Site address: la web que queremos incrustar
- Width: anchura inicial
- Height: altura inicial
- Scrollbar: si queremos mostrar la barra lateral para hacer scroll
- Border: muestra el borde del iframe
- Scale: tamaño respecto al contenedor del iframe. Cambiará la anchura máxima en relación al elemento padre
- Additional CSS: podemos añadir CSS extra al plugin
Y con esto ya sería suficiente para que el plugin merezca la pena. Pero no se queda ahí.
Otra opción que nos permite modificar son los breakpoints. Si sabes CSS sabrás de qué hablo pero, grosso modo, es el parámetro que nos permite modificar la anchura de pantalla a la que el iframe cambia de tamaño.
Esto es muy útil si, por ejemplo, queremos quitar el breakpoint de los dispositivos tablet o si queremos controlar manualmente la anchura del iframe dependiendo de la pantalla.
Pensamientos finales
He usado los iframe en diferentes proyectos y siempre me topaba con esta tesitura y me tocaba hacer malabares para hacerlos responsive.
Hasta que descubrí este plugin, claro. Sinceramente creo que debería estar en nuestra caja de herramientas si pretendemos usar iframes en nuestros proyectos.
Sin más por esta semana, un abrazo de Carlos Martínez y Alex Martínez. ¡Nos vemos la semana que viene PluginLovers!
Deja una respuesta