Sikau

HTML · Day 15 · about 25 min

Video, audio and embeds

Rich media, with captions.

Beyond pictures

Video and audio play natively in every browser — no plugins. And <iframe> embeds other pages, like maps or videos. Each needs a little care: captions, titles and sizes.

video, audio, iframe

<video controls width="640" height="360" poster="cover.jpg" preload="metadata">
  <source src="trek.webm" type="video/webm">
  <source src="trek.mp4" type="video/mp4">
  <track kind="captions" src="trek.en.vtt" srclang="en" label="English">
  Your browser can't play this video. <a href="trek.mp4">Download it</a>.
</video>

<audio controls src="birds.mp3"></audio>

<iframe src="https://www.openstreetmap.org/export/embed.html" width="400" height="300" title="Map of Pokhara" loading="lazy"></iframe>

Avoid autoplay with sound — it startles people and screen reader users can't hear their reader over it.

The rest of this lesson

  • Captions and transcriptsexplain
  • Embedding other pages safelyexplain
  • Which is missing?predict
  • Build a video elementorder
  • Your turnwrite code
  • Badge quizquiz
  • What you learnedrecap

Continue this lesson free — run real code in your browser

Continue with Google

See all 17 lessons of HTML