Seleccionar página
Compartir contenido

Un Iframe es un elemento html que nos permite incrustar en una página de nuestra web contenido externo.

Para entenderlo mejor es como insertar un pequeño bloque con contenido de otra página (una imagen, un video, un mapa u otro tipo de recursos).

Su uso es bastante común sobre todo cuando insertamos videos de YouTube u otras plataformas similares como Vimeo en nuestros proyectos.

Como está formado un iframe

Un iframe es básicamente una etiqueta de html que consta de varios elementos:

  • Etiqueta de Apertura [1]:Como cada elemento html donde comienza del objeto.
  • Etiqueta de Cierre [2]: En html simpre se marca donde acaba el objeto.
  • Fuente (src) [5]: La referencia del recurso externo con su url completa.
  • Anchura (width) [3]: El ancho que tendrá el recurso utilizado (se puede poner en porcentaje o px).
  • Altura (height) [4]: La altura (siempre en px) que deseamos que ocupe el objeto referenciado.
  • Parámetros adicionales [6]: Estos suelen ser generados por la plataforma aunque también son editables y configurables.

Puedes ver en la siguiente imagen la estructura de un ejemplo de iframe con un video de YouTube.

iframes-html-estructura

Como insertarlo

Si usas WordPress u otras plataformas similares la mayoría de plataformas (usaremos YouTube pare este ejemplo), te lo ponen fácil.

Para insertar un iframe de YouTube haremos los siguientes pasos

  • Elegimos el video deseado.
  • Buscamos el botón compartir.
    iframes-videos-youtube
  • Copiamos el enlace generado.
  • Pegamos el enlace en la página que estemos editando y listo, el enlace pegado se encarga de generar el iframe necesario.

En otros casos como los mapas de Google, tendremos que generar el iframe en html y pegarlo como tal, tendremos que realizar las siguientes tareas

  • Localizamos la dirección en Google maps o nombre de empresa
  • Buscamos el botón compartir
    iframe-google-maps-compartir
  • Hacemos click en insertar mapa (lo que nos mostrará el html)
    html google maps codigo generado
  • Copiamos el código generado
  • Pegamos en nuestra página, pero asegurándonos de pegarlo como HTML (del contrario no funcionará y lo hará como un simple texto)
  • Listo, ya tenemos nuestro mapa integrado
    iframe google maps funcionando

Cuando utilizar un iframe

En general usamos los iframes para enriquecer el contenido de nuestra web y hacerlo más interesante para el usuario, de esta manera conseguiremos una mejor experiencia de usuario y que pase más tiempo en nuestro contenido (importante para el SEO, por ejemplo).

Si una casa rural dispone de página web propia, será muy útil para los usuarios usar iframes de Google maps y hacer esa información más accesible e interactiva para el usuario.

Recuerda que el usuario es más dado a compartir contenido que resulte interactivo o dinámico en redes sociales.

Ejemplos de iframes

Algunos de los ejemplos más típicos de iframes usados en una web son los siguientes:

YouTube: La plataforma de videos más usada y el segundo buscador más usado.

Vimeo: Uno de los rivales directos de YouTube, aunque es más utilizado para videos corporativos.

Google Maps: Para mostrar al usuario nuestra dirección o bien la dirección o referencia de recursos de los que hablemos en nuestro contenido.

Google Trends: Esta magnífica herramienta nos permite ver las tendencias de búsquedas de los usuarios.

La lista sería interminable pero como podrás ver muchas plataformas ofrecen un proceso muy similar para la generación y uso de iframes html.

Desventajas de los iframes

Cuando hacemos referencia a recursos externos nuestra web se resentirá en la velocidad de carga de la misma, por lo tanto “la moraleja” es usarlos lo justo y necesario, como norma general para enriquecer y hacer más interesante nuestro contenido.

Entradas relacionadas: