Cómo insertar un iframe en WordPress con el bloque HTML, un plugin o código
Jun 10, 2026
/
Faradilla A.
/
5 min Leer
Si quieres mostrar contenido de otras webs en tu sitio de WordPress, insertar un iframe es uno de los métodos más sencillos.
Con un iframe, puedes mostrar imágenes y vídeos de plataformas como YouTube sin tener que alojarlos directamente en tu web. Además, te permite mantener tu sitio ligero y rápido.
En este artículo, veremos tres formas de insertar un iframe en WordPress. El método más habitual es incrustar contenido mediante el bloque HTML personalizado. Como alternativa, puedes insertar iframes mediante un plugin o añadiendo el código manualmente.
También veremos cuándo conviene usar un iframe y en qué se diferencia del bloque Incrustar de WordPress. ¡Vamos a ello!
Cómo insertar un iframe en WordPress
Aquí tienes tres formas sencillas de insertar iFrames en WordPress.
Cómo usar el código de inserción y el bloque HTML personalizado
Si quieres añadir iFrames en WordPress sin un plugin, la forma más sencilla es usar el código de inserción. Solo copia y pega el código de inserción del contenido en una web de WordPress con el bloque HTML personalizado.
Este método es ideal para incrustar contenido de redes sociales como Facebook y YouTube. Eso se debe a que algunas de estas plataformas restringen la inserción manual de iFrames.
Supongamos que quieres insertar un video de YouTube en tu web de WordPress. Sigue estos pasos:
- Localiza el botón Compartir debajo del video de YouTube.
- Aparecerá una ventana emergente con las distintas formas en que puedes compartir el video. Selecciona la opción Incrustar.
- Copia el código iFrame de YouTube que aparece. También puedes definir parámetros del iFrame, como la altura y la anchura del contenido.
- Abre el editor de bloques de la entrada o página en la que quieras incrustar el video en tu sitio web de WordPress.
- Haz clic en el icono + para añadir un bloque nuevo y selecciona HTML personalizado.
- Pega el código del iFrame.
- Cambia a la pestaña Vista previa. Ahora debería aparecer el iFrame.
Usarás el mismo método para incrustar contenido de otras redes sociales como Facebook, LinkedIn, Instagram y Twitter.
Cómo insertar un iFrame con un plugin de WordPress
Si quieres añadir contenido externo a tu web con regularidad, puede que te resulte más práctico usar un plugin. También es una excelente opción si no estás familiarizado con usar código HTML.
Hay muchos plugins de iFrame para WordPress entre los que puedes elegir, pero Advanced iFrame es uno de los mejores.
Advanced iFrame te da más control sobre el aspecto de tu iFrame. Por ejemplo, puedes ocultar áreas del diseño, pasar parámetros al iFrame u ocultar el contenido hasta que se cargue por completo.
Para empezar, instala y activa el plugin Advanced iFrame desde tu panel de WordPress.
Después, ve a Advanced iFrame y selecciona la pestaña Options:
Aquí puedes ajustar varias configuraciones, incluidas las opciones de visualización y las opciones técnicas.
Antes de insertar el iFrame en tu web de WordPress, usa el comprobador gratuito de iFrame del plugin para ver si la URL contiene algún script que impida que se cargue el contenido.
Una vez que lo hayas comprobado, vuelve a la pestaña de configuración básica del plugin en el panel de control de WordPress.
Desplázate hasta el campo URL para añadir la dirección que quieres mostrar. También puedes definir distintos valores, como la altura, la anchura y la transparencia del contenido.
Haz clic en Generate a shortcode for the current settings.
Copia el shortcode y pégalo en un bloque de Shortcode de cualquier entrada o página desde el editor de bloques. Después, previsualiza la página de WordPress en tu web para asegurarte de que el iFrame funcione como esperas.
Cómo insertar un iFrame manualmente mediante código
Para incrustar un iFrame manualmente, tendrás que añadir las etiquetas HTML de apertura y cierre del iFrame y la URL del contenido a tu web de WordPress.
La principal ventaja de este método es que tendrás un control total sobre cómo se mostrará el iFrame. Puedes modificar el ancho y el alto del iFrame, activar la visualización en pantalla completa o decidir cuándo debe cargarse.
Por desgracia, algunas redes sociales como Facebook e Instagram no permiten la inserción manual mediante iFrames. Además, algunos sitios web impiden que su contenido se muestre dentro de un iFrame mediante restricciones de seguridad específicas. Por ejemplo, si tu web utiliza HTTPS, es posible que los navegadores bloqueen contenido incrustado procedente de sitios que solo usan HTTP.
Para empezar, añade el código iFrame mediante el bloque HTML personalizado en tu entrada o página de WordPress.
Añade las etiquetas HTML de apertura y cierre con la URL del contenido entre ellas:
<iframe src=”example.com”></iframe>.
Debería verse más o menos así:
Si quieres cambiar el ancho o la altura, especifica las dimensiones exactas del iFrame después de la URL. Por ejemplo, vamos a establecer el ancho en 700 px y la altura en 900 px:
<iframe src=”example.com” width=”700” height=”900” ></iframe>.
Cuando termines de personalizar el iFrame, previsualiza el resultado para asegurarte de que se vea bien. Cuando estés conforme con el resultado, publica o actualiza tu página web.
Por qué usar un iFrame
Un iFrame es una de las formas más sencillas de mostrar contenido externo en tu propia web sin infringir las leyes de derechos de autor. En otras palabras, es una forma legal y ética de compartir en tu web contenido creado por otras personas.
Los iFrames también son útiles para incrustar videos u otros archivos grandes. Como no tienes que alojar el contenido del iFrame en tu Biblioteca multimedia, puedes ahorrar espacio de almacenamiento en tu cuenta de hosting.
Por eso, usar iFrames te permite mantener tu web ligera y rápida, y ofrecer a quienes la visitan una experiencia de usuario óptima. Como la velocidad de la web es un factor clave de posicionamiento, esto también ayuda a que tu web tenga más visibilidad en Google.
¿Cuál es la diferencia entre un iFrame y el bloque incrustar de WordPress?
Puedes compartir contenido externo en tu web de WordPress con iFrames y con los bloques de incrustación, gracias a la API oEmbed.
Sin embargo, iFrame y Embed tienen diferencias clave. Principalmente, se usan para distintos tipos de contenido.
iFrame es la mejor opción para mostrar documentos HTML de otras webs. También puedes personalizar la apariencia del contenido.
Mientras tanto, Embed puede usarse para compartir otros tipos de contenido, como PDF o animaciones Flash. Sin embargo, los bloques de inserción solo funcionan con webs específicas de terceros, como YouTube, Vimeo y Twitter. Facebook e Instagram ya no son compatibles con la API de oEmbed.
Para usar el bloque de WordPress Embed, abre el editor de una entrada o página desde tu panel de WordPress y selecciona el bloque Embed.
Conclusión
Un iFrame es una de las formas más sencillas de mostrar contenido de otras fuentes en tu web. Por ejemplo, puedes usarlo para compartir archivos grandes de audio y video.
En resumen, aquí tienes tres formas de incrustar un iFrame en tu web de WordPress:
- Copia el código iFrame de inserción y pégalo en el bloque HTML.
- Instala un plugin de WordPress, como Advanced iFrame.
- Edita y añade el código HTML del iFrame para incrustarlo manualmente.
Con los iFrames, puedes añadir contenido de otras webs de forma legal y ética. Además, puedes especificar sus parámetros para que el contenido aparezca exactamente como quieras.
Cómo insertar un iFrame en WordPress: preguntas frecuentes
Ahora ya sabes cómo incrustar un iFrame en tu web de WordPress. Sin embargo, puede que todavía tengas preguntas sobre el proceso. En esta sección, responderemos a las preguntas más frecuentes sobre los iFrames.
¿Qué es un iFrame?
El iFrame es un método habitual para mostrar contenido de fuentes externas en tu propia web. Puedes incrustar un iFrame en WordPress para compartir contenido de forma legal y ética. Además, como el contenido no está alojado en tu web, puedes liberar espacio de almacenamiento y mejorar el rendimiento de WordPress.
¿Puedo hacer que el contenido incrustado con iFrame sea adaptable?
Para que los iFrames se adapten bien y se vean correctamente en móviles, colócalos dentro del contenedor div. Esto permitirá que el iFrame cambie automáticamente de tamaño en función del ancho de la pantalla. Para hacerlo, añade lo siguiente al código HTML: u003cstrongu003eu0026lt;div class=””container”u0026gt; u0026lt;/divu0026gt;u003c/strongu003eu003cbru003eu003cbru003eTambién puedes añadir CSS al código del iFrame:u003cbru003eu003cbru003eu003cstrongu003e.container {u003cbru003epadding-top: 56.25%;u003c/strongu003eu003cbru003eu003cbru003eEl valor porcentual es útil al incrustar vídeos de YouTube para garantizar una visibilidad completa.
¿Cómo incrusto un iFrame sin un plugin?
Para usar iFrames en WordPress sin un plugin, tienes dos opciones. Primero, puedes copiar y pegar el código iFrame insertado del contenido en un bloque HTML personalizado. También puedes añadir manualmente las etiquetas HTML del iFrame indicando la URL de origen.
¿Cuáles son las alternativas a iFrame?
Una alternativa popular a los iFrame es el bloque Insertar de WordPress. También puedes usar un plugin como u003ca href=u0022https://smashballoon.com/u0022u003eSmash Balloonu003c/au003e para mostrar contenido externo de webs de redes sociales.
All of the tutorial content on this website is subject to Hostinger's rigorous editorial standards and values.
Faradilla, or Ninda, is a Content Marketing Specialist with a passion for technology, a curiosity for digital marketing trends, and a love for languages. When she's not writing Hostinger tutorials, you can find her learning about life sciences. Follow her on LinkedIn.
