Curso de HTML / Insertar audio, vídeo e iframe en HTML

HTML reproduce medios con audio y video, y muestra otro documento dentro de la página mediante iframe. El resultado depende de archivos reales, rutas correctas y formatos compatibles. Los controles, subtítulos o transcripciones y la confianza en el proveedor forman parte de la elección del recurso.

Preparar archivos de audio y vídeo

El siguiente fragmento presupone que has preparado sample.mp3, sample.mp4 y sample-poster.webp junto al archivo HTML. Usa materiales propios o con permiso y adapta los nombres al recurso real. El curso no incluye automáticamente esos archivos multimedia.

<audio controls>

  <source src="sample.mp3" type="audio/mpeg">

  Your browser does not support audio playback.

</audio>



<video controls width="640" height="360" poster="sample-poster.webp">

  <source src="sample.mp4" type="video/mp4">

  <track src="sample-en.vtt" kind="captions" srclang="en"

         label="English captions" default>

  Your browser does not support video playback.

</video>

controls ofrece los controles nativos y poster muestra una imagen previa del vídeo. Renombrar una extensión no transforma el formato real ni el códec. Si ofreces varios formatos, cada archivo debe existir realmente con su codificación correspondiente.

Los medios con voz o sonidos significativos necesitan alternativas apropiadas. Prepara subtítulos precisos y una transcripción cuando el audio aporta información. Permite que el usuario inicie la reproducción en lugar de sorprenderlo con sonido automático. La guía de medios accesibles de W3C WAI desarrolla las alternativas según el contenido.

Crear el archivo de subtítulos WebVTT

La referencia a sample-en.vtt no crea el archivo. Guárdalo como texto UTF-8. Este ejemplo mínimo contiene un solo intervalo de los tres primeros segundos:

WEBVTT



00:00:00.000 --> 00:00:03.000

Welcome to Small Garden.

Un archivo real debe cubrir la voz y los sonidos importantes con sus tiempos correctos. En el ejemplo, srclang="en" y la etiqueta identifican una pista en inglés. Para una pista en español necesitas contenido traducido y sincronizado, además del idioma y la etiqueta adecuados; no basta con cambiar esos atributos.

Si la pista no carga desde un archivo local, revisa primero existencia, extensión, codificación y tiempos. El acceso desde file:// y el tipo de respuesta del servidor pueden afectar a su carga. Una prueba en un servidor de desarrollo del mismo origen permite separar esas restricciones de los errores del archivo.

Insertar un documento externo con iframe

Un iframe muestra otro documento dentro de la página. Esta URL es un marcador estructural, no una incrustación multimedia que se prometa funcional:

<iframe

  src="https://example.com/embed/example"

  title="Introduction to the example content"

  width="640" height="360"

  loading="lazy"></iframe>

Sustitúyela por una URL de incrustación oficial de un proveedor fiable. Una página puede abrir correctamente en una pestaña y, aun así, prohibir mostrarse dentro de un marco. El title debe describir el propósito del marco para el usuario.

Los recursos externos también influyen en privacidad, cookies y rendimiento. Inclúyelos cuando aporten información útil y deja su título o contexto en el texto cercano. Así el artículo sigue siendo comprensible si el proveedor no carga. Consulta las referencias de video y iframe de MDN para sus atributos específicos.

Ajustar el ancho y practicar con un marco local

Un atributo de ancho de 640 píxeles no garantiza que el recurso quepa en un teléfono. Coloca este CSS en style dentro de head o en una hoja enlazada:

video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

El vídeo conserva su proporción original; el ejemplo de iframe utiliza una caja de 16:9. Ajusta esa proporción si el contenido incrustado necesita otra.

Para practicar sin depender de un proveedor ni de un vídeo, guarda este documento como embed.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Practice instructions</title>
</head>
<body>
  <h1>Small Garden instructions</h1>
  <p>This is a local example displayed inside an iframe.</p>
</body>
</html>

Guarda el siguiente como frame.html en la misma carpeta:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Frame practice</title>
  <style>
video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}
  </style>
</head>
<body>
  <h1>Read the instructions</h1>
  <iframe src="embed.html" title="Small Garden instructions" width="640" height="360"></iframe>
  <p><a href="embed.html">Open the instructions as a separate page</a></p>
</body>
</html>

Abre frame.html, identifica el encabezado y el párrafo del documento incrustado y prueba también el enlace que lo abre por separado. Compara un ancho amplio con 390 píxeles y revisa si cabe sin deformarse. Las rutas relativas explican la relación entre estos dos archivos.

Mantener alternativas y diagnosticar errores

Puedes ofrecer enlaces externos al reproductor hacia el vídeo y su transcripción:

<p><a href="sample.mp4">Open the example video file</a></p>
<p><a href="transcript.html">Read the video transcript</a></p>

Apunta esos enlaces a archivos y textos que hayas preparado realmente. El texto de respaldo escrito dentro de audio o video corresponde a navegadores que no admiten el elemento; no es un mensaje garantizado cuando un navegador compatible falla al descargar el archivo.

Si no se reproduce, verifica ruta, tipo de respuesta del servidor y compatibilidad con la codificación real. Si no cabe, revisa CSS y proporción. Para una incrustación externa, comprueba también la política del proveedor. La revisión de accesibilidad y teclado debe incluir controles, alternativas y enlaces, no solo la presencia del reproductor.