Multimedia

Video, audio, mapas y contenido de otras plataformas hacen que un sitio cobre vida. En esta lección aprenderás a usar <video> y <audio> nativos, agregar subtítulos, insertar videos de YouTube y mapas de Google con <iframe> y, sobre todo, a que todo se adapte a cualquier pantalla sin romper el diseño.

Concepto

Antes de HTML5, para poner un video necesitabas plugins como Flash. Hoy el navegador reproduce video y audio de forma nativa, con controles incluidos, accesibles y que funcionan en celulares.

Hay dos caminos:

• Alojar tú el archivo (<video>, <audio>): control total, sin publicidad ni rastreo, pero el archivo consume ancho de banda de tu servidor.
• Incrustar de otra plataforma (<iframe> de YouTube, Vimeo, Google Maps, Spotify): ellos sirven el contenido, pero cargan scripts pesados y de terceros.

Ejemplo

Video nativo e iframe responsivos

✏️ Editar en el Playground↗ Abrir en pestaña nueva

El elemento video

<video
  controls
  width="640" height="360"
  poster="img/portada-video.webp"
  preload="metadata"
  playsinline>
  <!-- El navegador usa la primera fuente que pueda reproducir -->
  <source src="video/recorrido.webm" type="video/webm">
  <source src="video/recorrido.mp4" type="video/mp4">

  <!-- Subtítulos -->
  <track src="video/recorrido-es.vtt" kind="subtitles" srclang="es" label="Español" default>

  <!-- Respaldo para navegadores sin soporte -->
  <p>Tu navegador no reproduce video. <a href="video/recorrido.mp4">Descárgalo aquí</a>.</p>
</video>

Atributos principales:

Atributo	Función
controls	Muestra los controles (play, volumen, pantalla completa). Casi siempre lo quieres.
poster	Imagen que se ve antes de reproducir.
autoplay	Reproduce al cargar. Los navegadores solo lo permiten si el video está en muted.
muted	Sin sonido.
loop	Repite al terminar.
playsinline	En iPhone, reproduce dentro de la página en lugar de pantalla completa.
preload	none (no descarga nada), metadata (solo duración y tamaño), auto (lo que decida el navegador).
width / height	Reservan el espacio (evitan saltos de diseño).

Video de fondo (hero)

Muy pedido en landings de restaurantes, hoteles e inmobiliarias:

<video autoplay muted loop playsinline poster="img/hero.webp" aria-hidden="true">
  <source src="video/hero.webm" type="video/webm">
  <source src="video/hero.mp4" type="video/mp4">
</video>

Cuidado con los videos de fondo

Mantenlos cortos (10–20 s), sin audio y muy comprimidos (menos de 3 MB). Respeta a quienes activan "reducir movimiento" en su sistema (con la media query prefers-reduced-motion en CSS) y asegúrate de que el texto encima tenga buen contraste.

Formatos de video

• MP4 (H.264): compatible con absolutamente todo. Siempre inclúyelo.
• WebM (VP9/AV1): más ligero; ponlo primero.

Para comprimir puedes usar HandBrake (gratuito) o ffmpeg:

# MP4 web optimizado, sin audio, 1280px de ancho
ffmpeg -i original.mov -vf scale=1280:-2 -c:v libx264 -crf 28 -preset slow -an -movflags +faststart hero.mp4

El elemento audio

<audio controls preload="none">
  <source src="audio/podcast-ep1.ogg" type="audio/ogg">
  <source src="audio/podcast-ep1.mp3" type="audio/mpeg">
  <p>Tu navegador no reproduce audio. <a href="audio/podcast-ep1.mp3">Descárgalo</a>.</p>
</audio>

Comparte casi todos los atributos de <video> (controls, autoplay, muted, loop, preload). MP3 es el formato universal.

Nunca reproduzcas audio automáticamente

Música que suena sola al entrar a un sitio es una de las peores experiencias posibles (y los navegadores la bloquean de todos modos). Deja que el usuario decida.

Subtítulos con track

Los subtítulos son esenciales para personas sordas, para quien ve videos sin sonido (¡la mayoría en redes y en el transporte!) y ayudan al SEO.

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track src="tutorial-es.vtt" kind="subtitles" srclang="es" label="Español" default>
  <track src="tutorial-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

El archivo de subtítulos usa el formato WebVTT (.vtt):

WEBVTT

00:00:00.000 --> 00:00:03.500
Bienvenidos a Café Aroma.

00:00:03.500 --> 00:00:07.000
Hoy te enseñamos a preparar un café de olla.

Valores de kind: subtitles (traducción o transcripción), captions (incluye sonidos: "[música]", "[risas]"), descriptions, chapters.

Detalle técnico

Los archivos .vtt deben servirse desde el mismo dominio (o con CORS habilitado), y no funcionan abriendo el HTML con doble clic: usa Live Server.

iframe: incrustar otras páginas

Un <iframe> es una "ventana" que muestra otra página web dentro de la tuya.

YouTube

En YouTube: Compartir → Insertar y copia el código. Una versión mejorada:

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Recorrido por Café Aroma"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen></iframe>

• Usa youtube-nocookie.com para no instalar cookies de seguimiento hasta que el usuario reproduzca.
• title es obligatorio para la accesibilidad: describe el contenido.
• loading="lazy": el iframe no se carga hasta que el usuario se acerca.

Google Maps

En Google Maps: busca el negocio → Compartir → Insertar un mapa → copia el HTML.

<iframe
  src="https://www.google.com/maps/embed?pb=CODIGO_QUE_TE_DA_GOOGLE"
  title="Ubicación de Café Aroma en Coyoacán"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allowfullscreen></iframe>

Buena práctica

Junto al mapa, escribe siempre la dirección como texto (en un <address>) y un enlace "Cómo llegar" a Google Maps. El iframe no es accesible para todos y en celular es más cómodo abrir la app de mapas.

Otros embeds comunes

• Vimeo: video sin publicidad, ideal para portafolios.
• Spotify / SoundCloud: reproductores de música o podcast.
• Calendly: agenda de citas.
• Formularios de Google, Typeform.

Seguridad de iframes

<!-- sandbox restringe lo que puede hacer el contenido incrustado -->
<iframe src="https://widget-externo.com" title="Widget" sandbox="allow-scripts allow-same-origin"></iframe>

Solo incrusta contenido de fuentes confiables. Un iframe carga código de otro sitio dentro del tuyo.

Embeds responsivos

Los iframes vienen con un ancho y alto fijos (por ejemplo width="560" height="315") y se desbordan en celulares. La solución moderna es aspect-ratio:

<iframe class="embed" src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Video" loading="lazy" allowfullscreen></iframe>

.embed {
  width: 100%;          /* ocupa todo el ancho disponible */
  aspect-ratio: 16 / 9; /* el alto se calcula solo */
  height: auto;
  border: 0;
}

/* Para mapas quizá prefieras una proporción más cuadrada */
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; }

/* El video nativo es aún más sencillo */
video { width: 100%; height: auto; }

Técnica antigua (padding-top) que verás en código heredado

.contenedor-video { position: relative; padding-top: 56.25%; /* 9/16 */ }
.contenedor-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

Funciona igual, pero aspect-ratio es más limpio y está soportado en todos los navegadores modernos.

Rendimiento: la "fachada"

Un solo iframe de YouTube puede cargar más de 1 MB de JavaScript aunque nadie reproduzca el video. En landings donde la velocidad importa, se usa una fachada: se muestra una imagen con un botón de play y el iframe real se carga solo al hacer clic. Puedes usar la librería lite-youtube-embed o hacerlo tú con un poco de JavaScript. Con loading="lazy" ya ganas bastante si el video está abajo en la página.

Casos de uso reales

• Restaurante: video de fondo en el hero (muted, loop) y mapa de Google en la sección de contacto.
• Escuela o curso: videos nativos con subtítulos .vtt en español e inglés.
• Inmobiliaria: recorrido virtual en video y mapa de la zona.
• Podcast: <audio> con transcripción en texto debajo (accesibilidad y SEO).

Ejercicios

1. Inserta un video nativo con controles, póster, formatos WebM y MP4, subtítulos en español y un enlace de descarga como respaldo.
2. Inserta un video de YouTube responsivo, con carga diferida, sin cookies y con título accesible.
3. Crea una sección "Visítanos" con un mapa responsivo en proporción 4:3, la dirección en <address> y un enlace "Cómo llegar".

Ver solución

<!-- Ejercicio 1 -->
<video controls width="1280" height="720" poster="img/poster.webp" preload="metadata" playsinline>
  <source src="video/clase.webm" type="video/webm">
  <source src="video/clase.mp4" type="video/mp4">
  <track src="video/clase-es.vtt" kind="subtitles" srclang="es" label="Español" default>
  <p><a href="video/clase.mp4">Descargar el video</a></p>
</video>

<!-- Ejercicio 2 -->
<iframe class="embed"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Tutorial: cómo preparar café de olla"
  loading="lazy"
  allow="encrypted-media; picture-in-picture"
  allowfullscreen></iframe>

<!-- Ejercicio 3 -->
<section aria-labelledby="visitanos">
  <h2 id="visitanos">Visítanos</h2>
  <iframe class="mapa"
    src="https://www.google.com/maps/embed?pb=CODIGO"
    title="Mapa de ubicación de Café Aroma"
    loading="lazy"></iframe>
  <address>Av. Francisco Sosa 123, Coyoacán, CDMX</address>
  <a href="https://maps.google.com/?q=Av.+Francisco+Sosa+123+Coyoacan" target="_blank" rel="noopener">
    Cómo llegar
  </a>
</section>

.embed { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.mapa  { width: 100%; aspect-ratio: 4 / 3; border: 0; }
video  { width: 100%; height: auto; }

Resumen

• <video> y <audio> son nativos: usa controls, varias <source> y contenido de respaldo.
• autoplay solo funciona con muted; nunca reproduzcas audio automáticamente.
• <track> con archivos .vtt agrega subtítulos.
• <iframe> incrusta YouTube, Maps y más; siempre con title y loading="lazy".
• aspect-ratio + width: 100% hace cualquier embed responsivo.
• Cuida el peso: comprime videos, usa preload adecuado y considera fachadas para YouTube.