Si te has preguntado que es un iFrame, llegaste al lugar correcto. Es la abreviatura de Inline Frame, y es un elemento totalmente útil y poderoso en el diseño web. Tal vez, has visto sitios web que tienen insertado un video de YouTube. Con este elemento, los diseñadores web pueden incluir cualquier tipo de medios dentro de una página.
A lo largo de este artículo, veremos qué es y como utilizar un iFrame. También, analizaremos otras cosas que debes tener en cuenta previo a insertar uno de estos en tu documento HTML.
¿Qué es un iFrame?
Es un marco (frame) dentro de otro marco. Nos referimos a un componente de un elemento HTML que te permite añadir documentos, medios interactivos y videos en un sitio web. Cuando realizas esto, tienes la capacidad de enseñar una página web secundaria en la página principal.
¿Cómo usar iFrame?
Entonces, ya vimos que iFrame es un elemento agregado para asociar contenidos de otros sitios web, ahora pasemos a cuál es la forma de utilizarlo. Lo que puedes hacer, es incrustarlo para brindarles a los usuarios un contexto sobre cierto tema en particular. Además, tienes la posibilidad de incluir uno de estos elementos empleando la etiqueta <iframe> en un documento HTML. Debes hacer lo siguiente, copia y pega el código que te dejamos a continuación en un bloc de notas, y guárdalo en formato .html:
<iframe src="https://www.youtube.com/watch?v=oSX6cy7kpxE&ab_channel=DonWeb" width="680" height="480" allowfullscreen></iframe>El código que ves tiene agregado un video de YouTube de DonWeb. Veamos cada etiqueta de forma apartada.
- La etiqueta <iframe>… se utiliza para incluir el video en el iFrame.
- (src) es el origen del contenido del servidor interno o externo. Recuerda que el código va incluido en la URL.
- Por último, ancho y alto es la relación de aspecto. Como en el ejemplo anterior, puedes establecer un tamaño fijo (680 x 480 píxeles). O puedes emplear un método que se base en el porcentaje (10%-100%) para ajustar automáticamente el elemento.
Riesgos de seguridad
El elemento iFrame, no expone ningún tipo de riesgo de seguridad para tu página o para los lectores. Este fue creado y desarrollado para que los creadores de contenido puedan agregar y brindar material visualmente atractivo para los usuarios que visiten el sitio. Aun así, debes asegurarte que al añadir un iFrame de un sitio, este sea totalmente seguro y confiable.
En el 2008, existió una oleada de inyección de código iFrame en ciertos sitios web legítimos, como por ejemplo ABC News. Lo particular de esto, fue que redirigía a los visitantes a un sitio malicioso, generando que se instale un virus en la PC de los usuarios e intentarán extraer información confidencial. Por esto mismo, no es recomendable incrustar este elemento como parte integral de tu sitio web.
Si sospechas de que un sitio web no es totalmente seguro y confiable, no debes enlazarlo ni incluir su contenido en tu elemento iFrame.
Conclusión
Resumiendo un poco lo que vimos anteriormente, iFrame se considera un elemento muy poderoso a la hora de involucrar a los usuarios con tu sitio web. Debes pensar en este elemento como una parte del contenido que generas, pero no debes considerarlo una parte integral de tu sitio web. Otra recomendación que te damos, es que no lo uses en exceso, incluso lo más óptimo es que desarrolles tu sitio sin él, y agregarlo únicamente con fines de desarrollo. Por último, no olvides que debes utilizarlo solamente en sitios que creas que son totalmente confiables y seguros.
¡Eso es todo! Esperamos que este artículo te haya servido para entender e implementar este gran elemento en tu sitio web.
Recuerda dar un vistazo a nuestras guías.
