Chapter 5: Audio, Video, and Embedding Media

This chapter introduces the core HTML features for sound, moving pictures and safe embedding. You will learn how to use the audio and video elements, add multiple sources, provide captions and transcripts, and embed trusted third-party players inside controlled iframe containers. By the end of the chapter you will have a simple home video page and a clear approach to safe external media.

Using the audio element

The audio element plays sound files directly in the page. The browser shows a native control when you include the controls attribute. Always offer at least two formats if possible so the browser can pick one it supports.

A minimal audio player

This example provides two common formats. The browser selects the first it can play and ignores the rest.

<audio controls>
  <source src="media/song.ogg" type="audio/ogg">
  <source src="media/song.mp3" type="audio/mpeg">
  Your browser cannot play audio in this format.
</audio>

Common audio attributes

These attributes control playback and loading behavior. Use them sparingly so the page remains friendly to the user and to assistive technology.

Accessible labeling and transcripts

Give every media element a clear label and provide a text transcript near the player. Screen reader users can then understand the content and context.

<figure>
  <figcaption>Podcast: Building a layout grid</figcaption>
  <audio controls preload="metadata">
    <source src="media/layout_grid.ogg" type="audio/ogg">
    <source src="media/layout_grid.mp3" type="audio/mpeg">
  </audio>
  <p>Transcript: In this episode we discuss columns, gutters and rhythm …</p>
</figure>

Using the video element

The video element displays movies with native playback controls. You can provide several sources, a poster image, and one or more track elements for captions and subtitles.

A minimal video player

This player includes controls and a poster image that appears before playback starts.

<video controls width="640" height="360" poster="media/teaser.jpg">
  <source src="media/teaser.webm" type="video/webm">
  <source src="media/teaser.mp4" type="video/mp4">
  Your browser cannot play this video.
</video>

Sizing and responsiveness

Fixed width and height set the intrinsic size. For flexible layouts, use CSS to make the player scale with the container while preserving aspect ratio.

<style>
  .video-fluid { max-width: 100%; height: auto; }
</style>
<video class="video-fluid" controls poster="media/clip.jpg">
  <source src="media/clip.mp4" type="video/mp4">
</video>

Captions with track

Provide captions with the track element. Set kind="captions", include a srclang code and a human-readable label. Use WebVTT files with the .vtt extension.

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

A simple home video page

This small page presents a home movie with captions, fallback text and a brief description. You can adapt the structure to a gallery or to a series of lessons.

<!doctype html><html lang="en">
<head>
  <meta charset="utf-8">
  <title>Home Movie: Autumn Walk</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; margin: 2rem; }
    .video { max-width: 720px; }
    .video video { width: 100%; height: auto; }
    .meta { color: #555; font-size: 0.9rem; }
  </style>
</head>
<body>

  <h1>Autumn Walk</h1>
  <p class="meta">Recorded in the local park on a windy afternoon; gentle ambient sound.</p>

  <section class="video">
    <h2>Watch the video</h2>
    <p>Use the built-in controls to play, pause or seek. Captions describe spoken words and important sounds.</p>
    <video controls poster="media/autumn_walk.jpg">
      <source src="media/autumn_walk.webm" type="video/webm">
      <source src="media/autumn_walk.mp4" type="video/mp4">
      <track kind="captions" src="media/autumn_walk.en.vtt" srclang="en" label="English" default>
      Your browser cannot play this video. You can <a href="media/autumn_walk.mp4">download the file</a> instead.
    </video>
  </section>

  <section>
    <h2>About this clip</h2>
    <p>Filmed at 24 frames per second with a phone camera. Edited for color balance and trimmed for length. No filters were applied.</p>
  </section>

</body>
</html>

Useful attributes and text tracks

Audio and video elements share many behaviors. The table below lists options you will use frequently, followed by a compact WebVTT sample that you can adapt for captions and subtitles.

WebVTT files are plain text. Each cue has a time range and an optional cue identifier. Keep lines short for readability.

WEBVTT

00:00:00.000 --> 00:00:02.500
Footsteps on the gravel path

00:00:02.500 --> 00:00:05.000
Birdsong grows louder near the trees

Embedding trusted external media

Sometimes you will not host the files yourself. Popular services provide embeddable players that you place on the page. Use the provider’s recommended snippet and apply conservative permissions so the embed behaves safely.

YouTube privacy-enhanced embed

This variant reduces tracking by using the youtube-nocookie.com domain. The allow attribute grants specific features the player needs.

<iframe
  width="560"
  height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0"
  title="Video title"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Vimeo embed with limited referrer

Set a strict referrer policy and avoid unnecessary query options. Replace VIDEO_ID with your identifier, for example 123456789.

<iframe
  src="https://player.vimeo.com/video/VIDEO_ID"
  width="560"
  height="315"
  title="Demo reel"
  frameborder="0"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="autoplay; fullscreen; picture-in-picture">
</iframe>

iframes and sandboxing

An iframe creates a nested browsing context that can isolate untrusted content. The sandbox attribute removes powerful capabilities by default, then you add back only what is required.

Basic iframe with sandbox

This frame can render simple markup from srcdoc. It cannot run scripts, submit forms or change the top page because the sandbox is active with no tokens.

<iframe
  title="Isolated note"
  sandbox
  srcdoc="<p>Hello from an isolated frame.</p>">
</iframe>

Granting minimal permissions

Add tokens to allow only what the content needs. The table gives a few practical choices that you will use often. Keep the set as small as possible.

<iframe
  title="Trusted widget"
  src="https://widgets.example.com/player?item={id}&opt=…"
  sandbox="allow-scripts allow-same-origin"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="fullscreen; picture-in-picture">
</iframe>