Apuntes html

HTML nunca falla, solo se ve raro.

Lección: Iframes y multimedia

En esta lección aprenderás a incrustar contenido externo, como vídeos de YouTube o mapas de Google, usando la etiqueta <iframe>. También conocerás brevemente <video> y <audio> para multimedia propia, como un vídeo grabado por ti. Antes, los frames (<frameset>) dividían la ventana del navegador en partes, pero están obsoletos. Hoy, <iframe> es la herramienta moderna, sencilla, y poderosa para integrar recursos de otras webs. Verás cómo usarla, personalizarla con CSS, y evitar problemas como carga lenta. Esta lección conecta con rutas (URLs en <iframe>), imágenes (atributos similares), y semánticas (dónde colocar <iframe>).

¿Qué son los iframes?

Un iframe (inline frame) es una ventana dentro de tu página que muestra contenido de otra fuente, como un vídeo, un mapa, o una página web. A diferencia de los antiguos frames, que dividían toda la ventana, un <iframe> es un elemento flexible que puedes colocar en cualquier parte de <body>. Ejemplos comunes:

  • Un vídeo de YouTube en un blog.
  • Un mapa de Google Maps en una página de contacto.
  • Un widget de Twitter mostrando tuits.

Ventajas:

  • Integra contenido externo sin programarlo.
  • Mejora la experiencia del usuario (vídeos, mapas interactivos).

Desventajas:

  • Puede ralentizar la carga si el contenido externo es pesado.
  • Requiere cuidado con seguridad y accesibilidad.

La etiqueta <iframe>

La etiqueta <iframe> incrusta contenido externo usando una URL en el atributo src. Es un elemento de bloque, como <div>, y puede estilizarse con CSS.

Atributos principales:

  • src: URL del contenido (absoluta o relativa).
  • width, height: Tamaño en píxeles o porcentaje (por ejemplo, width="100%").
  • title: Descripción para accesibilidad (lectores de pantalla).
  • allow: Permisos para funciones como pantalla completa o cámara (por ejemplo, allow="fullscreen").
  • sandbox: Restricciones de seguridad (por ejemplo, sandbox="allow-scripts").
  • loading: Carga diferida (loading="lazy") para mejorar rendimiento.
  • allowfullscreen: Permite pantalla completa (para vídeos).

Ejemplo 1: Vídeo de YouTube

Para incrustar un vídeo de YouTube, copia el código de "Compartir" → "Incrustar" desde YouTube.

Ejemplo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Vídeo de YouTube" allowfullscreen></iframe>

Resultado: Un reproductor de YouTube en tu página.

Ejemplo 2: Mapa de Google Maps

Copia el código de "Compartir" → "Incrustar un mapa" desde Google Maps.

Ejemplo:

<iframe width="600" height="450" src="https://maps.google.com/maps?q=London&output=embed" title="Mapa de Londres" loading="lazy"></iframe>

Resultado: Un mapa interactivo de Londres.

Ejemplo 3: Página web

Puedes incrustar otra página web, aunque algunas (como Google) bloquean esto por seguridad.

Ejemplo:

<iframe src="https://ignit.net" width="100%" height="400" title="Sitio ignit.net"></iframe>

Nota: Verifica que el sitio permita incrustarse (puede fallar por restricciones).

Personalizar con CSS

Usa style para bordes, márgenes, o responsividad.

Ejemplo con CSS:

<iframe style="border: 2px solid #333; margin: 10px;" width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Vídeo de YouTube" allowfullscreen></iframe>

Multimedia con <video> y <audio>

Si tienes tus propios vídeos o audios (por ejemplo, un tutorial grabado), usa <video> o <audio> en lugar de <iframe>. Estas etiquetas de HTML5 son más ligeras y no dependen de servicios externos.

<video>: Vídeos propios

Muestra un vídeo alojado en tu servidor.

Atributos:

  • src: Ruta al vídeo.
  • controls: Muestra controles (play, pausa).
  • width, height: Tamaño.
  • poster: Imagen previa.

Ejemplo:

<video width="320" height="240" controls>
  <source src="mi_video.mp4" type="video/mp4">
  Tu navegador no soporta vídeos.
</video>

<audio>: Audios propios

Reproduce un archivo de audio.

Atributos:

  • src: Ruta al audio.
  • controls: Controles (play, pausa).

Ejemplo:

<audio controls>
  <source src="mi_audio.mp3" type="audio/mpeg">
  Tu navegador no soporta audios.
</audio>

Nota: <source> permite múltiples formatos (MP4, WebM) para compatibilidad. Conecta con la lección de rutas para src.

Por qué <iframe> reemplazó a <frameset>?

Antes de HTML5, los frames (<frameset>, <frame>) dividían la ventana del navegador en partes, cada una con un documento HTML. Por ejemplo:

<frameset cols="20%,80%">
  <frame src="menu.html">
  <frame src="contenido.html">
</frameset>

Problemas de <frameset>:

  • Carga lenta (múltiples documentos).
  • Mala accesibilidad (lectores de pantalla no los entendían bien).
  • URLs confusas (difícil compartir una página específica).
  • Obsoletos en HTML5: Reemplazados por <iframe> o CSS (Flexbox, Grid).

Ventajas de <iframe>:

  • Flexible: Se coloca en <body> como cualquier elemento.
  • Moderno: Soporta vídeos, mapas, y widgets.
  • Controlable con CSS y atributos de seguridad (sandbox).

Nota: No uses <frameset> ni <frame>; solo <iframe> para incrustar contenido.

Ejemplo completo

Aquí tienes una página con <iframe> y <video>: 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Iframes y multimedia - Ignside.net</title>
</head>
<body>
  <header>
    <h1>Mi página multimedia</h1>
  </header>
  <main>
    <section>
      <h2>Vídeo de YouTube</h2>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Vídeo de YouTube" style="border: 2px solid #333;" allowfullscreen></iframe>
    </section>
    <section>
      <h2>Mapa de Londres</h2>
      <iframe width="600" height="450" src="https://maps.google.com/maps?q=London&output=embed" title="Mapa de Londres" loading="lazy"></iframe>
    </section>
    <section>
      <h2>Mi vídeo</h2>
      <video width="320" height="240" controls>
        <source src="mi_video.mp4" type="video/mp4">
        Tu navegador no soporta vídeos.
      </video>
    </section>
  </main>
  <footer>
    <p>© 2025 ignit.net</p>
  </footer>
</body>
</html>

Instrucciones:

  • Guarda como iframes_multimedia.html en UTF-8 (en VS Code: "Archivo" → "Guardar como" → selecciona UTF-8).
  • Reemplaza mi_video.mp4 con un archivo real o elimina la sección <video> si no tienes uno.
  • Abre en un navegador para verificar el vídeo de YouTube y el mapa.
  • Sube al servidor en modo binario.

Consejos para evitar problemas

  1. Usa UTF-8: Declara <meta charset="UTF-8"> para caracteres como é (por ejemplo, Pérez).
  2. Añade title: Incluye title en <iframe> para accesibilidad (lectores de pantalla).
  3. Prueba URLs: Verifica que el src de <iframe> funcione (algunos sitios bloquean incrustaciones).
  4. Usa loading="lazy": Mejora la carga en <iframe> con contenido pesado.
  5. Evita <frameset>: Está obsoleto; usa <iframe> o CSS para diseños.
  6. Seguridad con sandbox: Aplica sandbox en <iframe> para contenido no confiable.
  7. Prueba en móviles: Usa <meta name="viewport"> (lección de cabeceras) para que <iframe> sea responsivo.
TOP