Inicio > Cursos > HTML & CSS > Multimedia: Audio, Video e Iframes
HTML & CSSIntroducción a HTMLLección 7 de 24

Multimedia: Audio, Video e Iframes

HTML5 introdujo etiquetas nativas para audio y video, eliminando la necesidad de plugins como Flash. La etiqueta <video> permite reproducir videos directamente en el navegador con controles integrados (play, pausa, volumen, pantalla completa). La etiqueta <audio> hace lo mismo para archivos de sonido.

Los iframes permiten incrustar contenido externo dentro de tu página: videos de YouTube, mapas de Google, publicaciones de redes sociales, o incluso otras páginas web completas. Son como una "ventana" dentro de tu página que muestra contenido de otro sitio.

<!-- Video con controles -->
<video src="intro.mp4" controls width="640" height="360">
  Tu navegador no soporta video HTML5.
</video>

<!-- Video con múltiples formatos -->
<video controls poster="portada.jpg" width="640">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<!-- Audio -->
<audio src="musica.mp3" controls>
  Tu navegador no soporta audio HTML5.
</audio>

<!-- Iframe: video de YouTube -->
<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560" height="315"
  title="Título del video"
  allowfullscreen
></iframe>

<!-- Iframe: mapa de Google -->
<iframe 
  src="https://maps.google.com/maps?q=lugar&output=embed"
  width="600" height="400"
  title="Mapa de ubicación"
></iframe>
Consejo🎬 El atributo poster en <video> muestra una imagen de portada antes de que el usuario presione play. Siempre agrega title a los iframes para accesibilidad.
← Tablas HTMLMeta Tags, SEO y Buenas Practicas →

Practica esta lección

Resuelve los ejercicios del curso de HTML & CSS en la app, gratis y con corrección automática.

Empezar a practicar