← Years 9–10 Data & Information

Embedding audio and video with HTML

The <video> element embeds a video in a page. Its src attribute gives the file, and controls adds play and pause buttons. The <audio> element works the same way for sound.

Part of: 9-10 Digital Technologies: Interactive content with emerging tools — Module 5, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 69

Understanding Embedding audio and video with HTML in Years 9–10 Data & Information

What it does: Without controls the viewer has no buttons to play or pause. Adding the controls attribute fixes this. Anything written between the opening and closing video tags is only shown when the browser cannot display the video. The <video> element embeds video. <img> is only for still images, so it can't play a clip. src (source) holds the file path for <audio> and <video>. href is used on links, not media. HTML uses <audio> for sound. There is no <sound> element, so the browser would ignore it. Video sites give you embed code, usually an <iframe>. A watch-page address isn't a video file, so <video src> can't play it.

Common mistakes: The closing tag has a spelling mistake. It must match the opening tag, so it should be </video>. The attribute that adds play and pause buttons is controls, with an s. It should be controls>.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Embedding audio and video with HTML to a class →

This module's key terms are also in a printable crossword (Modules 83–132) and word search (Modules 6–132).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which tag embeds a video file in a web page?
<video src="clip.mp4" controls></video><img src="clip.mp4" controls></img>
Matches
<video controls>clip.mp4</video>
↓
The file name is written as text between the tags instead of being given in the src attribute, so no video loads. It should be <video src="clip.mp4" controls></video>.
Applying
Meanings
Term
<video controls>
Meaning
The <video> element embeds a video in a page. Its src attribute gives the file, and controls adds play and pause buttons. The <audio> element works the same way for sound.
Practice
<video src="intro.mp4" controls>
Testing
Gaps
< src="clip.mp4" controls></video>
Check Answer
Spots
3 Video not supported.
4</vidio>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Octopus' badge — Multi-Tasker, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which tag embeds a video file in a web page?
A. <img src="clip.mp4" controls></img>
B. <video src="clip.mp4" controls></video> ✓
The <video> element embeds video. <img> is only for still images, so it can't play a clip.
2. Which attribute gives the viewer play and pause buttons?
A. controls ✓
B. buttons
Adding controls to <video> or <audio> shows the browser's play and pause buttons. There is no attribute called buttons.
3. Which attribute tells the browser which file to load into the <audio> element?
A. href
B. src ✓
src (source) holds the file path for <audio> and <video>. href is used on links, not media.
4. Which line embeds a sound file the viewer can play and pause?
A. <audio src="song.mp3" controls></audio> ✓
B. <sound src="song.mp3" controls></sound>
HTML uses <audio> for sound. There is no <sound> element, so the browser would ignore it.
5. A student writes <video src="intro.mp4"></video> with no other attributes. What will the viewer see?
A. No play or pause buttons, because controls is missing ✓
B. A full set of play and pause buttons
Without the controls attribute the browser shows no buttons, so the viewer can't easily start the video. Add controls to fix it.

Match the Pairs

<video src="clip.mp4" controls></video> → Embeds a video file in the page and shows play and pause buttons for the viewer.
<audio src="song.mp3" controls></audio> → Embeds a sound file in the page with a player the viewer can use to play and pause it.
Add the controls attribute so the viewer gets play and pause buttons on a video → <video src="intro.mp4" controls></video>
Fallback text between the tags is shown if the browser cannot play the video → <video src="intro.mp4" controls>Video not supported.</video>
<video controls>clip.mp4</video> → The file name is written as text between the tags instead of being given in the src attribute, so no video loads. It should be <video src="clip.mp4" controls></video>.
<audio src="song.mp3"> → There is no controls attribute and no closing </audio> tag, so the viewer gets no play button. It should be <audio src="song.mp3" controls></audio>.

Key Term

<video controls>
The <video> element embeds a video in a page. Its src attribute gives the file, and controls adds play and pause buttons. The <audio> element works the same way for sound.

Fill in the Blanks

1. <video src="clip.mp4" controls></video>
Hint: Type the element name that embeds a film clip in the page.
2. <audio src="song.mp3" controls></audio>
Hint: Type the attribute that gives the viewer play and pause buttons.
3. <video src="trailer.mp4" controls></video>
Hint: Type the attribute that tells the browser where the media file is.
4. <video src="clip.mp4" controls> Your browser cannot play this video. </video>
Hint: Type the element name that closes this tag after the fallback text.
5. <audio src="https://example.com/pod.mp3" controls></audio>
Hint: Type the element name used to embed hosted sound instead of video.

Spot the Error

Question 1
A <video src="dance.mp4"
B controls>
C Video not supported.
D </vidio>
Line D — The closing tag has a spelling mistake. It must match the opening tag, so it should be </video>.
Question 2
A <audio src="song.mp3"
B control>
C Audio not supported.
D </audio>
Line B — The attribute that adds play and pause buttons is controls, with an s. It should be controls>.
Question 3
A <video width="320"
B src="movie.mp4", controls>
C Video not supported.
D </video>
Line B — HTML attributes are separated by spaces, not commas. The line should be src="movie.mp4" controls>.
Question 4
A <video controls
B width="320"
C scr="intro.mp4">
D </video>
Line C — The attribute name is misspelled. The file is given with src, not scr, so the video would not load.
Question 5
A <sound controls
B src="theme.mp3">
C Audio not supported.
D </audio>
Line A — There is no <sound> element in HTML. Audio is embedded with the <audio> element, so the line should be <audio controls.

Student with a class code? Join your class →