que es un iframe en una pagina web para que sirven como usarlos y ejemplos

¿Qué es un iframe en una página web? — Para qué sirven, cuándo usarlos y ejemplos

Para aquellos que aún no lo sepan, un iframe en una página web es un documento HTML que está incrustado dentro de otro por medio del uso de la etiqueta <iframe>, la cual se emplea al momento agregar el contenido de fuentes externas en una página, bajo el formato de código HTML..

¿Para qué sirve una etiqueta iframe en HTML?

Los iframes se utilizan para insertar un fragmento de contenido de otra fuente en una página. Es algo así como una ventana adicional que muestra ciertos tipos de contenidos externos dentro de ella, pero sin la necesidad de abandonar el dominio para verlos.

para que sirve una etiqueta iframe en html

¿Cuándo debería utilizar un iframe en una página web?

El propósito principal de un iframe es mostrar contenido de terceros en una página web, o en todo caso, conectar contenido propio, pero que se encuentra publicado en otras plataformas. Algunos de los usos más comunes de los iframes podrían ser los siguientes.

Anuncios

Esta función es mucho más frecuente de lo que se suele esperar, ya que muchos anuncios de barra lateral y de banner son en realidad iframes, permitiendo organizar un poco más estas herramientas dentro del contenido; principalmente para lograr resultados atractivos, sin dejar de lado a la monetización.

Videos de Youtube

El código de inserción de YouTube utiliza un iframe para mostrar un video alojado en su plataforma, sin redirigir a los usuarios a su plataforma. Esto es increíblemente beneficioso para un dominio, ya que ahorrará la molestia de tener que subirlo completo en una biblioteca de medios. 

Redes sociales

Una forma de mostrar las publicaciones más recientes es a través de un iframe, el cual es totalmente personalizable. Esto es conveniente porque las publicaciones se actualizarán automáticamente, incluso sin tener que dejar la página una vez que la estás viendo.

Cómo hacer que un iframe se ajuste al contenido

Con tantos dispositivos y pantallas de distintos tamaños, saber cómo hacer que un iframe se ajuste al contenido puede tener sus beneficios. Para lograrlo simplemente modifica el width: del iframe dependiendo del tamaño que quieras que ocupe; si quieres que el iframe ocupe toda la pantalla horizontalmente, agrega un 100% luego de dicho parámetro.

como hacer que un iframe se ajuste al contenido

Ejemplos de etiquetas iframe en HTML

Muchas plataformas suelen habilitar sus iframes para ser incrustadas en todo tipo de contenidos, beneficiándose a sí mismas, así como a los dominios en donde se los agrega. ¿Quieres ver ejemplos de etiquetas iframe en HTML? ¡Aquí tienes algunos!

Ejemplo 1: 

¿Quieres añadir un iframe con información del Servicio Meteorológico completamente funcional en tu página? Con este ejemplo podrás ver un pronóstico en una pequeña ventana, buscar un mapa o consultar la temperatura minuto a minuto.

<iframe src = “http://www.weather.gov/” width = “1000” height = “400”> </iframe>

Ejemplo 2: 

En este ejemplo puedes experimentar un poco con las etiquetas; en este caso lo haremos para eliminar el borde, deshabilitar la barra de desplazamiento, e incluso hacer que el fondo sea transparente para ver un video subido a YouTube

<iframe width = “480” height = “300” src = “https://www.youtube.com/watch?v=GgUU1pCcImo” frameborder = “0” allowfullscreen> </iframe>

Estos artículos te pueden interesar

¿Has visto el resto de artículos disponibles en la web? Échales un vistazo justo aquí abajo.