Illustration of three mountain peaks with flags and a climber on the middle one

Challenge · medium

HTML Video, Audio and Iframe: Accessible Media Fix

Q: How do I add a video to an HTML page?

Write a <video> element with controls . Inside it, put one <source> per file format, each with a type such as video/webm or video/mp4 . Browsers play the first format they understand, which is why an open format like WebM usually goes first. Set width and height so the page keeps the space free, and finish with a download link as a fallback.

About 15 minmedium

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

Goal: Make a video, a sound clip and an embedded page work for everyone.

Learn

Leave off the controls attribute and <audio> disappears completely. A <video> without it still shows a picture, but nobody can pause it. The video section of the HTML standard (opens in a new tab) lists every media attribute if you want the full set.

Skip autoplay. Sound or motion out of nowhere startles people and talks over screen readers, and browsers block it anyway unless the video is muted. Audio that starts by itself also breaks WCAG 2.2 success criterion 1.4.2, Audio Control (opens in a new tab).

Browsers disagree about formats. Give the video several <source> elements with a type each and the browser plays the first one it can handle. Anything else you put inside the video element, like a download link, is shown only when nothing plays. One more thing: an <iframe> needs a title, or a screen reader user has no idea what the frame holds. See the lessons on audio and video and on iframes for the details.

The short version

Add controls so people can pause, play and even see the audio player.
Leave out autoplay. Nothing should start until the visitor asks for it.
List each format in its own <source> with a type, then add a fallback link.
Every <iframe> gets a title that says what is in it.

Example

<audio controls>
  <source src="t-rex-roar.mp3" type="audio/mpeg">
  <a href="t-rex-roar.mp3">Download the roar</a>
</audio>

Your task

This media page has five problems. Fix them:

Give the video controls and take autoplay off the page.
Swap the video's src for two <source> elements, each with a type: the .webm file (video/webm) and the .mp4 file (video/mp4). The URL is the same apart from the ending.
Inside the video, add a fallback link to the .mp4 file.
Give the audio controls.
Give the iframe a title describing its content.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Frequently asked questions

How do I add a video to an HTML page?

Write a <video> element with controls. Inside it, put one <source> per file format, each with a type such as video/webm or video/mp4. Browsers play the first format they understand, which is why an open format like WebM (opens in a new tab) usually goes first. Set width and height so the page keeps the space free, and finish with a download link as a fallback.

Why does autoplay not work in my browser?

Because browsers block it. Autoplay with sound is refused until the visitor has clicked or tapped something on the site, so nobody gets a surprise blast of noise. A video that has both autoplay and muted will usually start. Even so, moving content can distract or disorient people. Give them controls and let them press play.

Tags in this lesson

<audio>Plays sound, like music or a podcast episode.<iframe>Shows another web page inside a frame on yours.<source>One alternative file inside picture, audio or video.<video>Adds a video player.