iFrame es la abreviatura de Inline Frame y es un elemento poderoso en el diseño web. Probablemente hayas visto innumerables videos de YouTube insertados en sitios distintos a YouTube.
Un Iframe es un documento de una web que se inserta en otra página web. Se trata de un elemento que puede albergar cualquier tipo de contenido en su interior y que ayuda, entre otras cosas, a ampliar el mensaje que se ofrece con fuentes externas o con material complementario que pueda resultar de interés para el usuario que entra
En este artículo, analizaremos más de cerca qué es un iFrame y cómo usarlo, y hablaremos sobre otras cosas que vale la pena tener en cuenta antes de colocar un iFrame en tu documento HTML.
¿Qué es un iFrame?
Un iFrame es un marco (frame) dentro de un marco. Es un componente de un elemento HTML que permite incrustar documentos, videos y medios interactivos dentro de una página. Al hacer esto, puedes mostrar una página web secundaria en su página principal.
El elemento iFrame permite incluir un fragmento de contenido de otras fuentes. Puede integrar el contenido en cualquier lugar dentro de tu página, sin tener que incluirlos en la estructura de tu diseño web, como un elemento tradicional.
Sin embargo, no es bueno usar el iFrame en exceso, ya que puede poner lenta tu página y ser un riesgo para la seguridad, especialmente si utilizas contenido de un sitio web sospechoso. Puedes pensar en un iFrame como una parte de tu contenido, pero no como parte de tu sitio. Por ejemplo, si quieres agregar un video de YouTube para aportar valor a tus lectores, puedes insertar un elemento iFrame en ese post.
Para qué sirve un Iframe
Un Iframe sirve para que cualquier publicación que se haga en una página web pueda quedar mucho más enriquecida y ser más atractiva y completa para el visitante. Así, las webs pueden añadir vídeos, imágenes o cualquier otro recurso procedente de terceros para que se muestre automáticamente por pantalla.
Ajustables y fáciles de usar, son un recurso muy utilizado sobre todo en medios de comunicación digitales gracias a su capacidad para ofrecer información adicional que pueda ser interesante para el usuario. Utilizar este elemento es positivo para crear un contenido de calidad, pero negativo para los algoritmos de búsqueda, que cada vez penalizan más la adición de código con material externo.
Cómo usar iFrame
Ahora ya sabes que iFrame es un elemento adicional para compartir contenido de otros sitios. Puedes agregarlo para darle a los lectores un contexto sobre un tema determinado. También es posible insertar un elemento iFrame utilizando la etiqueta <iframe> en un documento HTML. Copia el código siguiente, pégalo en el bloc de notas y guarda el archivo en formato .html:
<iframe src="https://www.youtube.com/watch?v=CeqPx7NnnBw" width="680" height="480" allowfullscreen></iframe>
El código anterior mostrará un video en YouTube. Ahora examinemos cada etiqueta por separado:
- La etiqueta <iframe>… </iframe> se usa para contener el video dentro del iFrame.
- El fuente de iFrame (src) es el origen del contenido del servidor externo o interno. No olvides poner el código incrustado en la URL.
- Ancho y alto es la relación de aspecto del iFrame. Puedes insertar un tamaño fijo como 680 × 480 píxeles (px) como en el ejemplo. O bien, puedes utilizar un método basado en el porcentaje (10%-100%) para ajustar el iFrame automáticamente.
Riesgos de seguridad
Por naturaleza, el elemento iFrame no representa ningún riesgo de seguridad para tu página web o tus lectores. En parte, fue desarrollado para ayudarle a los creadores de contenido a agregar material visualmente atractivo para los lectores. Sin embargo, debes prestar atención al agregar un iFrame de un sitio web no confiable.
Hubo una oleada de inyección de código iFrame en algunos sitios web legítimos, como ABC News, en el 2008. Este tipo de ataque redirige a los visitantes a un sitio malicioso, que luego instalará un virus en la PC de los visitantes o intentará robar información confidencial. Por eso no se recomienda incluir iFrame como parte integral de tu sitio web.
Si crees que un sitio web no es seguro, ni siquiera te molestes en enlazarlo y no pongas su contenido en tu elemento iFrame.
