• Saltar a la navegación principal
  • Saltar al contenido principal
PluginLover

PluginLover

La newsletter sobre plugins de WordPress

  • Sobre PluginLover
  • Newsletter
  • Directorio
  • Patrocinar

Newsletter #128 – Iframe responsive en WordPress

julio 27, 2022 by Deja un comentario

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?

Tutorial completo del plugin Responsive iframe
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!

Publicado en: Sin categoría

Interacciones con los lectores

Esta newsletter está patrocinada por...

Deja una respuesta Cancelar la respuesta

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

Copyright © 2022 PluginLover · Contacto · Proponer · Open Metrics · Legal · Creado por CarlosMR

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los ajustes.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.