El contenido incrustado es realmente común en los sitios web. Esto se debe, en gran medida, a que permiten a las plataformas digitales retraer contenido de múltiples servidores con el fin de crear experiencias de navegación coherentes.
![<< [Plantilla gratuita] >> Plantillas de códigos de programación para HTML.](https://no-cache.hubspot.com/cta/default/53/bb3e5cad-5b6c-4956-a702-59b9da03864a.png){kind=small}
Lo anterior, es a lo que usualmente conocemos como elementos iframe. En este artículo te contamos qué son, para qué sirven y cómo puedes utilizarlos en tu sitio web.
Qué es un iframe
Un iframe es un elemento HTML que contiene algún otro documento HTML dentro de él. Este puede ser insertado en cualquier lugar del código HTML y, por lo tanto, aparecer en el lugar deseado de una página. Gracias a estos elementos, se pueden incrustar contenidos en una página web, ya sea un video, un formulario, un documento o, incluso, otra página web.
Para qué sirve la etiqueta iframe
Los sitios web, generalmente, utilizan los iframes para incluir elementos externos. Pensemos en el caso de los videos. Es común que los sitios web usen estos elementos incrustándolos en sus páginas. Son recursos que pueden añadir un gran valor a tu sitio, ya que ayudan a atrapar, informar y encantar a tus visitantes (siempre y cuando tenga sentido que los hayas integrado). En este caso, YouTube es una solución de hosting de video; para ello, la principal ventaja es que no necesitas almacenar los elementos en tu servidor, sino simplemente incrustarlos en tu código HTML.
Como puedes ver, esta es una de las capacidades más útiles de este lenguaje de programación, ya que puedes tomar algún contenido de cualquier otros sitio web (con el permiso del propietario) y colocarlo en el propio para mejorar la experiencia de navegación.
Diferencias entre elemento iframe y elemento incrustado
Antes de continuar es importante saber que existen otros elementos en HTML5 conocidos como elementos incrustados (o embed). Así como los iframes, estos elementos son utilizados para incluir a otro externo en una página web. Sin embargo, tienen algunas diferencias que es recomendable conocer.
Como hemos dicho, los iframes sirven para situar un documento HTML en una página. Por su parte, los elementos incrustados se utilizan para insertar otro tipo de contenidos, como PDF, plugins y automatizaciones. Esto significa que las incrustaciones permiten incluir también recursos de video o imágenes, pero siempre es mejor usar iframes para eso.
Esto se debe a que los elementos embed funcionan solo para tecnologías web viejas, por lo que es mejor apoyarse en elementos iframe, que son mucho más comunes y siempre harán su trabajo.
Cómo hacer un iframe
Para utilizar un elemento iframe es necesario utilizar la etiqueta <iframe> en el código HTML. Esta etiqueta requiere de un atributo src, que denote la fuente URL o HTML de donde debe ser extraído el documento que será incrustado en la página web. En su forma más básica, el elemento iframe lucirá así:
<iframe src="URL"></iframe>
Si quisiéramos incrustar un elemento en esta línea de código, lucirá de este modo:
<iframe src="https://www.example.com/" width="1500px" height="500px"></iframe>
Al final, el elemento que ha sido incrustado en la página deberá lucir así:
Atributos de un iframe
Como pudiste apreciar en el ejemplo anterior, el elemento incrustado existe de forma independiente a la página en donde se ha insertado. Por ello, y debido a que tiene un propio código HTML, CSS y JavaScript, el sitio nos arroja un elemento con las propiedades del sitio fuente, como la tipografía y el estilo.
Pero al incrustarlo, es común que necesitemos que el elemento tenga algunos atributos adicionales, como la altura y ancho. Estos ayudan a definir la región en la que aparecerá el documento incrustado, ya sea como pixeles o porcentajes.
Como todos los otros elementos HTML, los iframes pueden ser personalizados mediante otros atributos. Aquí hay algunos de los más comunes:
allow
Indica las funciones que un iframe puede usar, como pantalla completa, cámara o reproducción automática.
allowfullscreen
Autoriza o niega el permiso para que un iframe aparezca en pantalla completa.
height
Establece la altura (el tamaño automático es de 150 pixeles).
loading
Define si el elemento tendrá una carga diferida o simultánea al acceso a la página.
referrerpolicy
Define qué información de la referencia será mostrada cuando se solicite el iframe.
src
La dirección de la fuente del elemento es incluida en él.
width
Establece el ancho (el tamaño automático es de 300 pixeles).
Ejemplos de elemento iframe
Video incrustado
Como hemos visto, los sitios web suelen utilizan elementos iframe para incorporar recursos externos en una página web. Por ejemplo, aquí podemos ver un video de YouTube creado por HubSpot que podemos incluir mediante este llamado:
<iframe width="560" height="315" src="https://www.youtube.com/embed/S93nYy-Bxzo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Mapas incrustados
Por su parte, los mapas incrustados en una página pueden ser realmente útiles para los visitantes a un sitio web. Solo es necesario copiar el código de cualquier ubicación en un mapa y mostrarla mediante el siguiente código:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1718.6454008049905!2d-71.07787073663287!3d42.36955552931532!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e370bc261e50e5%3A0xf3cba8437d505a26!2sHubSpot!5e0!3m2!1sen!2sus!4v1602001548652!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Este elemento iframe se verá así en tu sitio:
Cómo hacer un iframe responsivo
Hasta ahora, hemos visto cómo implementar elementos iframe en sitios web para computadoras de escritorio; pero ¿qué hay de las páginas para dispositivos móviles? Con cada vez más usuarios que prefieren estos medios para navegar, resulta importante usar iframes que se ajusten al tamaño de las pantallas.
Afortunadamente, realizarlo solo requiere usar un poco de CSS. Sigamos los pasos necesarios para hacerlo con el ejemplo del video de HubSpot que trabajamos más arriba:
<iframe width="560" height="315" src="https://www.youtube.com/embed/S93nYy-Bxzo"></iframe>
El segundo paso será remover los parámetros de ancho y largo que hayas introducido en el código HTML, debido a que esto hará que tu video siempre aparezca con las mismas dimensiones. Tu código deberá lucir así:
<iframe src="https://www.youtube.com/embed/S93nYy-Bxzo"></iframe>
Ahora será importante que encierres tu elemento en el contenedor div. Con él, podrás redimensionar el tamaño con base en el ancho de la pantalla:
<div class=”container>
<iframe src="https://www.youtube.com/embed/S93nYy-Bxzo"></iframe>
</div>
Por último, será necesario aplicar la siguiente indicación en CSS para el código HTML que hemos visto:
.container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
La sección .container aplica a todo lo que contiene div. Por su parte, la propiedad padding-top asignada a 56,25 % es lo que permite establecer una medida adecuada para los videos de YouTube. Este tamaño asegura que el video se verá completo, independientemente del ancho del contenedor y surge de la división de las medidas estándar de los videos de YouTube: 9/16.
Por último, el elemento de estilo .container iframe aplica únicamente al iframe y hace que el elemento adquiera el espacio entero del lugar en el que está contenido.
Una vez que apliques el código en CSS, el video se adaptará al ancho de la pantalla, luciendo así:
Por supuesto, si quieres simplificar el proceso para agregar contenido desde otros sitios, utiliza un creador de páginas web intuitivo donde no necesites modificar el código.
Precauciones al utilizar iframes
Como hemos visto, los elementos iframe pueden ser realmente útiles, pero existen algunos aspectos que es necesario tomar en cuenta antes de implementarlos.
En primer lugar, debes asegurarte de que el sitio o el contenido que vas a integrar es confiable y seguro. Si los atacantes de un sitio llegan a infectar el código de la página de la que has extraído un elemento, tu propio sitio puede correr riesgo.
En segundo lugar, estos elementos pueden afectar el rendimiento de tu página si es que el recurso tarda mucho en cargar o si el sitio fuente no es muy veloz. Para evitar este problema es recomendable que no incluyas demasiados en una misma página y que consideres hacer uso del atributo loading:
<iframe src="URL" loading="lazy"></iframe>
Con este ajustado en lazy podrás establecer que el iframe solo cargue en el momento en que aparezca al visitante. De este modo no aumentará el tiempo de carga de tu página inicial.
Por último, considera el efecto de los iframes en tus páginas SEO. Google recomienda evitarlos en tu sitio, debido a que esos contenidos son más difíciles de indexar. Si aun así quieres usarlos, es deseable que utilices texto con hipervínculos a las fuentes de donde has sacado el recurso para que los rastreadores de búsqueda puedan dar con ellos.
Los elementos iframe son algunos de los más viejos en el lenguaje HTML y el diseño de una página web, pero han sobrevivido a lo largo del tiempo gracias a su utilidad y flexibilidad. Si quieres integrar recursos a tu página web, este elemento es para ti.
