Audio, Video and Embeds

What you'll learn

• How to play video and audio with <video> and <audio>.
• How to offer several file formats and add captions.
• How to embed content from other websites with <iframe>.

The idea

Video and audio without plug-ins

Before HTML5, playing a video needed a browser plug-in such as Flash. Now it's one element:

<video controls width="640" height="360" poster="intro-poster.jpg">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt" srclang="en" label="English">
  Sorry, your browser can't play this video. <a href="intro.mp4">Download it</a> instead.
</video>

• controls shows the play button, volume and progress bar.
• poster is the picture shown before the video starts.
• Several <source>s let the browser choose a format it supports. MP4 works almost everywhere.
• <track kind="captions"> adds captions from a WebVTT (.vtt) text file. They help deaf viewers, people watching with the sound off and language learners.
• The text inside shows only in very old browsers.

Audio works the same way:

<audio controls src="podcast-episode-1.mp3"></audio>

Avoid autoplay. Sound that starts by itself annoys people and confuses screen-reader users; most browsers block autoplay with sound anyway.

Embedding with <iframe>

An <iframe> (inline frame) shows another web page inside yours. Video sites and map services give you iframe code to copy from their Share → Embed menus. For example, YouTube's help explains how:

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="How to plant tomatoes (video)"
        loading="lazy"
        allowfullscreen></iframe>

• Always add a title that describes the content; screen readers announce it.
• loading="lazy" waits to load the frame until the user scrolls near it, which keeps your page fast.

Try it

This preview has no video files, so it shows the built-in audio player and an iframe that contains a small page of its own (written in the srcdoc attribute):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
</head>
<body>
  <h1>Media</h1>

  <h2>The built-in audio player</h2>
  <audio controls>
    <source src="missing-episode.mp3" type="audio/mpeg">
    Your browser can't play this audio.
  </audio>
  <p>The controls are drawn by the browser, with no plug-in. (There's no file here, so it won't play.)</p>

  <h2>An embedded page</h2>
  <iframe title="A tiny embedded page" width="320" height="120"
          style="border: 1px solid #94a3b8; border-radius: 8px"
          srcdoc="<p style='font-family: sans-serif'>Hello! I'm a separate page shown inside an iframe.</p>"></iframe>
</body>
</html>

Your turn

1. Change the iframe's srcdoc to show a heading and a short list.
2. On your own computer, put a short .mp4 video next to your page and play it with <video controls>.
3. Find a video you like, use its Share → Embed option, paste the code into your page and add a good title.

Common mistakes

• No captions on videos with speech.
• Autoplaying with sound. Let people press play.
• Iframes without a title. Screen-reader users hear only "frame".
• Huge video files on your own server. Long videos are usually better hosted on a video service and embedded.

Key points

• <video> and <audio> play media natively; add controls, several <source>s and a fallback.
• <track kind="captions"> adds captions from a .vtt file.
• <iframe> embeds other pages such as videos and maps; give it a title and loading="lazy".
• Avoid autoplay with sound.