Etiqueta iframe en HTML: ¿Qué es y como usarla?

La etiqueta iframe en HTML es un elemento fundamental que permite incrustar contenido de otras páginas web dentro de la tuya. Es una herramienta poderosa en programación web que ofrece flexibilidad y versatilidad. Desde mostrar videos de YouTube hasta integrar mapas de Google Maps, descubre cómo utilizar la etiqueta iframe con ejemplos prácticos y consejos para crear sitios web más interactivos y dinámicos.

1. ¿Qué es la etiqueta iframe en HTML?

La etiqueta <iframe> (Inline Frame) es un elemento HTML que es utilizada para incrustar otro documento HTML dentro de la página actual. Este documento puede ser de cualquier tipo: HTML, XHTML, XML, etc. La etiqueta <iframe> crea un marco en línea en el cual se muestra el documento incrustado. Esto permite que los desarrolladores integren contenido de otras páginas web en su propio sitio de manera fácil y segura.

Por ejemplo, si deseas mostrar un mapa de Google Maps en tu sitio web, puedes usar la etiqueta <iframe> para incrustar el mapa dentro de tu página. Esto se logra mediante el uso de la URL del mapa en el atributo src de la etiqueta <iframe>.

1.1. Ejemplo básico de cómo se ve la etiqueta <iframe> en HTML:

Aquí dejamos un ejemplo de como se ve la etiqueta <iframe> incrustando una ubicación de Google Map en tu página web:

EJEMPLO USANDO EL CÓDIGO DE IFRAME HTML:

2. ¿Para que sirve el elemento iframe HTML?

El elemento <iframe> en HTML tiene varios usos, entre los más comunes se encuentran:

1. Incrustar contenido externo:
2. Dividir el contenido de la página:
3. Reutilizar contenido:
4. Otras aplicaciones:

2.1. Incrustar contenido externo:

• Videos de YouTube: Puedes insertar un video de YouTube directamente en tu página web sin necesidad de descargarlo o alojarlo en tu propio servidor.
• Mapas de Google Maps: Muestra un mapa interactivo de una ubicación específica o ruta directamente en tu página.
• Publicaciones de redes sociales: Integra feeds de Twitter, Facebook u otras redes sociales para mostrar contenido dinámico en tu sitio.
• Formularios de terceros: Incorpora formularios de encuestas, registros o pagos de otras plataformas sin redireccionar a otro sitio web.

2.2. Dividir el contenido de la página:

• Crea secciones independientes dentro de una misma página, brindando una mejor organización y estructura al contenido.
• Permite mostrar contenido relacionado o complementario al tema principal de la página sin necesidad de crear nuevas páginas o utilizar demasiados enlaces internos.

2.3. Reutilizar contenido:

• Inserta la misma sección o módulo de HTML en diferentes páginas de tu sitio web, ahorrando tiempo y esfuerzo en la creación de contenido redundante.
• Facilita la actualización del contenido, ya que solo se necesita modificar el HTML original y se reflejará en todas las páginas donde se haya incrustado el iframe.

2.4. Otras aplicaciones:

• Mostrar presentaciones de diapositivas o infografías interactivas.
• Integrar chats en vivo o herramientas de atención al cliente.
• Cargar contenido multimedia personalizado en función de las preferencias del usuario.
• Implementar juegos o aplicaciones web dentro de tu página.

3. ¿Cómo es la sintaxis de la etiqueta iframe HTML?

La etiqueta <iframe> en HTML tiene la siguiente sintaxis básica:

<iframe src="URL_DEL_CONTENIDO" width="ancho" height="alto" frameborder="0" allowfullscreen></iframe>

Aquí hay una descripción de los atributos más comunes utilizados en la etiqueta <iframe>:

• src: Especifica la URL del contenido que se incrustará en el iframe.
• width: Especifica el ancho del iframe en píxeles o en porcentaje.
• height: Especifica la altura del iframe en píxeles o en porcentaje.
• frameborder: Controla si se debe mostrar o no un borde alrededor del iframe. El valor «0» significa que no se debe mostrar ningún borde.
• allowfullscreen: Permite que el contenido incrustado tenga la opción de expandirse a pantalla completa si es compatible.

Estos son solo algunos de los atributos comunes, pero hay otros que puedes usar según tus necesidades específicas. Recuerda que debes reemplazar "URL_DEL_CONTENIDO" con la URL real del contenido que deseas incrustar y ajustar el ancho y la altura según tus preferencias.

4. ¿Cómo insertar la etiqueta iframe HTML? Paso a paso:

Para usar la etiqueta <iframe> correctamente en tu página web, sigue estos pasos:

1. Selecciona el contenido a incrustar:
   • Decide qué contenido deseas incrustar en tu página web. Puede ser un mapa, un vídeo, una encuesta, una presentación de diapositivas, etc.
2. Obtén la URL del contenido:
   • Si el contenido que deseas incrustar está alojado en otro sitio web, necesitarás obtener la URL del mismo. Por ejemplo, si deseas incrustar un mapa de Google Maps, deberás obtener la URL del mapa.
3. Usa la etiqueta <iframe> en tu código HTML:
   • Una vez que tengas la URL del contenido, puedes usar la etiqueta <iframe> (siguiendo la sintaxis vista en el punto anterior) en tu código HTML para incrustarlo. Recuerda que lo debes incrustar dentro de la etiqueta <body> de tu página web en el lugar de tu preferencia.
4. Personaliza según sea necesario:
   • Puedes personalizar la apariencia y el comportamiento del iframe mediante atributos como width, height, frameborder, allowfullscreen, entre otros. Asegúrate de revisar la documentación del contenido que estás incrustando para conocer las opciones disponibles.
5. Prueba tu página:
   • Una vez que hayas agregado el iframe a tu página web, asegúrate de probarla en diferentes navegadores y dispositivos para garantizar que el contenido incrustado se muestra correctamente y que la página se ve como esperabas.

Siguiendo estos pasos, podrás usar la etiqueta <iframe> correctamente en tu página web para incrustar contenido externo y mejorar la experiencia del usuario.

5. ¿Cuáles son los atributos mas usados con la etiqueta iframe?

La etiqueta <iframe> en HTML tiene varios atributos que permiten configurar su comportamiento y apariencia. Entre los más comunes se encuentran:

5.1. Atributos esenciales:

• src: Especifica la URL del documento HTML que se va a incrustar en el iframe. Este atributo es obligatorio.
• width: Define el ancho del iframe en píxeles o como un porcentaje del ancho de la página contenedor.
• height: Define la altura del iframe en píxeles o como un porcentaje de la altura de la página contenedor.

5.2. Atributos adicionales:

• scrolling: Controla si se muestran barras de desplazamiento en el iframe cuando el contenido es demasiado grande para el área visible. Los valores posibles son «auto», «yes», «no» y «hidden».
• frameborder: Determina si se muestra un borde alrededor del iframe. Los valores posibles son 0 (sin borde), 1 (borde delgado) y cualquier número entero para un borde más grueso.
• allowfullscreen: Permite que el contenido del iframe se muestre en pantalla completa.
• title: Define un título para el iframe que se muestra como información emergente al pasar el cursor sobre él.
• name: Asigna un nombre al iframe que se puede utilizar para acceder a él mediante JavaScript.
• sandbox: Restringe las capacidades del iframe para mejorar la seguridad, como la ejecución de scripts o el acceso a cookies.

5.3. Otros atributos menos comunes:

• longdesc: Proporciona una descripción larga del contenido del iframe para usuarios de lectores de pantalla.
• marginwidth: Establece el ancho de los márgenes izquierdo y derecho del iframe.
• marginheight: Establece el alto de los márgenes superior e inferior del iframe.
• align: Define la alineación del iframe dentro de la página contenedor (por ejemplo, «left», «center», «right»).
• hspace: Agrega espacio horizontal adicional alrededor del iframe.
• vspace: Agrega espacio vertical adicional alrededor del iframe.

Además de estos atributos, también puedes utilizar CSS para personalizar la apariencia del iframe, como el color del borde, el relleno y el margen.

6. ¿Qué ventajas y desventajas hay al usar un iframe HTML?

6.1. Ventajas de usar un iframe HTML en tu página web:

• Incrustación de contenido externo: Una de las mayores ventajas del <iframe> es su capacidad para incrustar contenido externo dentro de tu página web, lo que te permite mostrar contenido de otros sitios web de manera fácil y rápida.
• Facilidad de integración: Es fácil de implementar. Solo necesitas proporcionar la URL del contenido que deseas incrustar y ajustar algunos parámetros, como el ancho y la altura del iframe.
• Flexibilidad: Los iframes son flexibles y pueden contener una variedad de contenido, como mapas, vídeos, formularios, encuestas, widgets de redes sociales, entre otros.
• Seguridad: Al incrustar contenido externo en un iframe, puedes aislarlo del resto de tu página web, lo que puede mejorar la seguridad al evitar conflictos con tu propio código o la ejecución de scripts no deseados.

6.1. Desventajas de usar un iframe HTML en tu página web:

• Control limitado al incrustar contenido externos: El contenido del iframe proviene de una fuente externa, lo que limita tu control sobre su apariencia, comportamiento y seguridad.
• Vulnerabilidades de seguridad: Si no se tiene cuidado al usar iframes de fuentes no confiables, se pueden introducir vulnerabilidades de seguridad en tu sitio web.
• Dependencia de terceros: Dependes del correcto funcionamiento del sitio web externo para que el iframe se muestre correctamente.
• Puede reducir la velocidad de carga: Los iframes pueden ralentizar la carga de tu página, especialmente si el contenido incrustado es pesado o proviene de un servidor lento.
• Recursos del servidor: El servidor de tu sitio web tendrá que cargar el contenido del iframe, lo que puede aumentar el uso de recursos y afectar el rendimiento general.
• Problemas de SEO: El contenido incrustado en iframes puede ser más difícil de indexar por los motores de búsqueda, lo que puede afectar la visibilidad y el posicionamiento de tu sitio web en los resultados de búsqueda.
• Malware: El contenido malicioso en un iframe podría afectar la seguridad de los visitantes de tu sitio.
• Problemas de accesibilidad: Si el contenido incrustado en el iframe no es accesible o no es compatible con lectores de pantalla, puede afectar la accesibilidad de tu sitio web para usuarios con discapacidades.

7. ¿Cómo verificar la seguridad si incrusto contenido externo con iframe HTML?

Existen varias formas de verificar si una URL externa es confiable y segura antes de incrustarla en tu página web:

7.1. Herramientas de verificación de seguridad:

Antes de agregar contenido externo, puedes usar estas herramientas que analizan la URL y te proporcionan información sobre su reputación, si ha sido identificada como maliciosa o si está asociada con sitios web sospechosos. Estas herramientas son:

• Google Safe Browsing
• URL Void
• Norton Safe Web
• Quttera

7.2. Análisis manual:

• Inspecciona la URL: Busca elementos sospechosos como errores ortográficos, caracteres aleatorios o subdominios desconocidos.
• Revisa el sitio web: Accede al sitio web desde una cuenta de usuario temporal y comprueba si tiene las siguientes características:
  • Certificado SSL válido (el prefijo de la URL debe ser «https://» y un candado verde debe aparecer en la barra de direcciones).
  • Información de contacto visible y actualizada.
  • Políticas de privacidad y términos de uso claros.
  • Comentarios y opiniones de usuarios disponibles.
• Busca en la web: Investiga el sitio web y su reputación en motores de búsqueda, foros y sitios web de revisión.

7.3. Extensiones del navegador:

Estas extensiones te proporcionan información sobre la seguridad y confiabilidad de los sitios web que visitas.

• Web of Trust
• HTTPS Everywhere
• Ghostery

7.4. Consejos extras:

• Es importante ser proactivo al verificar la seguridad de las URL externas.
• No confíes ciegamente en las herramientas de verificación, ya que pueden tener errores o limitaciones.
• Combina diferentes métodos para obtener una evaluación completa de la confiabilidad de una URL.
• Prioriza la seguridad de tus visitantes y evita incrustar contenido que pueda poner en riesgo sus datos o dispositivos.

Al seguir estos consejos, puedes tomar decisiones informadas sobre qué URL externas incrustar en tu página web y proteger a tus visitantes de posibles amenazas.

8. ¿Cómo poner un iFrame en WordPress?

8.1. Poner un elemento iframe usando Gutenberg:

Para agregar un iframe en WordPress utilizando el editor de bloques Gutenberg (el editor que nosotros recomendamos usar en WordPress), puedes seguir estos pasos:

1. Inicia sesión en tu panel de WordPress: Accede al panel de administración de tu sitio web WordPress con tus credenciales de inicio de sesión.
2. Edita una entrada o página existente o crea una nueva: Dirígete a la entrada o página donde deseas agregar el iframe, o crea una nueva si prefieres.
3. Agregar un bloque HTML personalizado:
   • En el editor de bloques Gutenberg, haz clic en el signo más (+) en la parte superior izquierda o en cualquier lugar dentro del editor para agregar un nuevo bloque.
   • En la barra de búsqueda de bloques, escribe «HTML» o «HTML personalizado» para encontrar el bloque HTML personalizado.
4. Inserta el código del iframe: Una vez que hayas agregado el bloque HTML personalizado, puedes insertar el código del iframe directamente dentro de este bloque. Para ellos sigue la sintaxis explicada en el punto 3.
5. Actualizar o publicar la entrada/página: Una vez que hayas agregado el bloque HTML con el código del iframe, puedes actualizar o publicar tu entrada o página para guardar los cambios.

Siguiendo estos pasos, podrás agregar un iframe a tu entrada o página de WordPress utilizando el editor de bloques Gutenberg. Este método te permite insertar código HTML personalizado de manera fácil y rápida, incluido el código de un iframe.

8.2. Poner un elemento iframe usando Elementor:

Para agregar un iframe en WordPress utilizando Elementor, puedes seguir estos pasos:

1. Inicia sesión en tu panel de WordPress: Accede al panel de administración de tu sitio web WordPress con tus credenciales de inicio de sesión.
2. Edita la página con Elementor: Dirígete a la página donde deseas agregar el iframe y haz clic en el botón «Editar con Elementor».
3. Busca el widget de HTML: Una vez en el editor de Elementor, busca el widget de HTML. Puedes encontrarlo en la barra de widgets a la izquierda, bajo la sección «Básico» o «General».
4. Arrastra y suelta el widget de HTML en la página: Una vez que hayas encontrado el widget de HTML, arrástralo y suéltalo en la sección de la página donde deseas agregar el iframe.
5. Inserta el código del iframe: Haz doble clic en el widget de HTML para abrir el editor de texto. Luego, inserta el código del iframe directamente dentro de este widget. Para ellos sigue la sintaxis explicada en el punto 3.
6. Actualiza la página: Una vez que hayas agregado el código del iframe, guarda los cambios y actualiza la página para ver el resultado.

Este método te permite insertar código HTML personalizado, incluido el código de un iframe, de manera fácil y rápida mediante el uso del widget de HTML de Elementor.

9. ¿Cómo usar el elemento HTML iframe correctamente? Consejos:

Recomendaciones al usar una etiqueta iframe en tu página web:

9.1. Consideraciones generales al utilizar un iframe HTML:

• Utiliza iframes con moderación: No abuses de los iframes, ya que un uso excesivo puede afectar negativamente la experiencia del usuario, la velocidad de carga de la página y el SEO.
• Prioriza la seguridad: Verifica la confiabilidad y seguridad de las URL externas antes de incrustarlas en iframes. Utiliza herramientas de verificación, análisis manual y extensiones del navegador para evaluar los riesgos.
• Controla el contenido: Asegúrate de que el contenido del iframe sea relevante para tu página web y no distraiga a los visitantes de su objetivo principal.
• Mantén la accesibilidad: Proporciona alternativas de texto y descripciones adecuadas para el contenido del iframe, haciéndolo accesible para usuarios con discapacidades.
• Optimiza el rendimiento: Elige el tamaño adecuado para el iframe y optimiza el contenido incrustado para que no afecte la velocidad de carga de la página.
• Considera la experiencia del usuario: Asegúrate de que la navegación dentro del iframe sea fluida y que la experiencia del usuario sea consistente con el resto de tu sitio web.
• Utiliza atributos con cuidado: Comprende la función de cada atributo del iframe y utilízalos solo cuando sea necesario.
• Monitorea y actualiza: Revisa periódicamente el rendimiento y la seguridad de los iframes en tu página web y realiza actualizaciones cuando sea necesario.

9.3. Recomendaciones adicionales usando atributos de una etiqueta iframe:

• Enmarca el contenido: Utiliza el atributo scrolling para controlar si se muestran barras de desplazamiento en el iframe.
• Elimina el borde: Establece frameborder en 0 para eliminar el borde visible alrededor del iframe.
• Permite la pantalla completa: Utiliza el atributo allowfullscreen para permitir que el contenido del iframe se muestre en pantalla completa si es apropiado.
• Define un título descriptivo: Utiliza el atributo title para proporcionar un título informativo que se muestre al pasar el cursor sobre el iframe.
• Utiliza un nombre único: Asigna un nombre al iframe con el atributo name si necesitas acceder a él mediante JavaScript.
• Restringe las capacidades: Utiliza el atributo sandbox para limitar las capacidades del iframe y mejorar la seguridad, como la ejecución de scripts o el acceso a cookies.
• Combina con CSS: Personaliza la apariencia del iframe utilizando CSS para modificar el color del borde, el relleno, el margen y otros estilos.

RECUERDA:

• Los iframes son una herramienta poderosa, pero deben usarse con responsabilidad.
• Prioriza la experiencia del usuario, la seguridad y el rendimiento al utilizar iframes en tu página web.
• Consulta con un desarrollador web experimentado si necesitas ayuda para implementar iframes de manera segura y efectiva.

Siguiendo estas recomendaciones, puedes aprovechar las ventajas de los iframes para enriquecer tu página web con contenido externo, mejorar la organización y reutilizar módulos de HTML, todo ello sin comprometer la seguridad, la experiencia del usuario o el rendimiento de tu sitio.

10. ¿Cómo hacer para que un iframe HTML sea Responsive?

Existen varios métodos para hacer un iframe responsivo, aquí dejamos dos de estos métodos:

10.1. Método con contenedor Div:

PASO 1: Envuelve el iframe en un contenedor div.

<div class="iframe-container">
  <iframe src="URL_DEL_IFRAME"></iframe>
</div>Lenguaje del código: HTML, XML (xml)

PASO 2: Aplica estilos CSS al contenedor div para hacerlo responsivo.

.iframe-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}Lenguaje del código: CSS (css)

Explicación:

• El padding-bottom del contenedor div se establece en un porcentaje que representa la relación de aspecto del contenido del iframe.
• El iframe se posiciona absolutamente dentro del contenedor y ocupa todo el ancho y alto disponible.

10.2. Método con atributos CSS:

PASO 1: Elimina los atributos width y height del iframe.

PASO 2: Aplica estilos CSS directamente al iframe para hacerlo responsivo.

iframe {
  position: relative;
  width: 100%;
  height: 100%;
}Lenguaje del código: CSS (css)

Explicación:

• Al eliminar los atributos width y height, el iframe se ajusta al tamaño de su contenedor.
• La propiedad position: relative permite que el iframe se posicione dentro de su contenedor.
• Las propiedades width: 100%; y height: 100%; hacen que el iframe ocupe todo el ancho y alto disponible de su contenedor.

Consideraciones adicionales al hacer un iframe responsivo:

• Relación de aspecto: Si el contenido del iframe tiene una relación de aspecto diferente, como 4:3, necesitarás ajustar el valor del padding-bottom en el método del contenedor div o utilizar una consulta de medios CSS para diferentes relaciones de aspecto.
• Contenido adaptable: Si el contenido del iframe se adapta al tamaño de la ventana, es posible que necesites ajustar el tamaño del iframe dinámicamente con JavaScript.
• Bibliotecas de terceros: Existen bibliotecas de JavaScript como FitVids.js o Respond.js que pueden ayudarte a simplificar el proceso de hacer que los iframes sean responsivos.

RESUMEN: Ambos métodos te permiten crear iframes HTML responsivos que se adaptan al tamaño de la pantalla del usuario. Elige el método que mejor se adapte a tus necesidades y preferencias.

PREGUNTAS FRECUENTES Y RESUMEN