Three Tags, Three Kinds of Media
So far you've embedded static images with <img>. HTML5 also gives you native tags for playable media and embedded pages: <audio>, <video>, and <iframe> — each with its own job.
- ✓<audio> plays sound files with built-in play, pause, and volume controls.
- ✓<video> does the same for video files, including a visible frame and playback controls.
- ✓<iframe> embeds an entirely separate web page or widget inside your own.
The <audio> Tag
The controls attribute is what makes the play button, timeline, and volume slider appear — without it, the audio is invisible and silent.
<audio controls> <source src="lesson-intro.mp3" type="audio/mpeg"> Your browser doesn't support the audio element. </audio>
Using <source> instead of a plain src attribute lets you offer more than one file format, so the browser picks whichever one it supports.
The <video> Tag
<video> works almost identically to <audio>, with a few extra attributes for sizing and behavior.
<video controls width="640" poster="thumbnail.jpg"> <source src="day12-demo.mp4" type="video/mp4"> Your browser doesn't support the video element. </video>
Shows the built-in play, pause, and volume interface.
Sets a preview image shown before the video starts playing.
Starts playback automatically — use sparingly, and always with muted.
Restarts the video automatically once it reaches the end.
The <iframe> Tag
An <iframe> ("inline frame") embeds an entire separate web page inside a small window on your own page — commonly used for YouTube videos, Google Maps, and embedded forms.
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" title="Lesson recap video" allowfullscreen> </iframe>
The title attribute on an <iframe> isn't just a tooltip — screen readers rely on it to describe what the embedded content actually is, so never skip it.
Breaking Down What You Just Learned
<audio controls>Embeds a playable sound file with built-in playback controls.
<video controls>Embeds a playable video file, optionally with a poster thumbnail.
<source>Offers one or more file formats inside <audio> or <video> for browser compatibility.
<iframe>Embeds a separate web page inside your own, sized with width and height.
title on <iframe>A required accessibility label describing what's embedded.
Try It Yourself
Embed any public YouTube video on a test page using <iframe>, giving it a descriptive title and a fixed width and height.
Build a Mini Media Page
Combining audio, video, and an iframe on one page
Create a new file called day12.html inside your course folder and build a simple media showcase.
- Start with the full DOCTYPE, html, head, and body structure.
- Add a <video> element with controls and a poster image, using a placeholder file path.
- Add an <audio> element with controls, using a placeholder mp3 file path.
- Add an <iframe> embedding a public YouTube video, with a proper title attribute.
- Give each media element a heading above it describing what it is.
- Confirm every <iframe> has a title and every <audio>/<video> has the controls attribute.
Recap
Embeds a sound file with native browser playback controls.
Embeds a video file, with poster, loop, and autoplay options.
Provides multiple file formats for browser compatibility.
Embeds an entire external web page, sized and titled.
Key Takeaways
- <audio> and <video> embed playable media with native browser controls.
- The controls attribute is what makes playback buttons visible at all.
- <source> lets you offer multiple formats for wider browser support.
- <iframe> embeds a separate web page, like a YouTube video or a map.
- Always give an <iframe> a descriptive title for accessibility.