🎬 Phase 6 · Images & Media🟢 BeginnerMODULE 20
Video
Course progress57%
🎯 What you'll learn: Embedding video with
<video>, the poster attribute for a preview frame, multiple sources, and captions with <track>.
Section 1
The video Element
<video> works almost identically to <audio>, plus visual-specific attributes: width/height, and poster — a static image shown before the video starts playing.
video-basic.html
HTML
<video src="demo.mp4" controls poster="demo-thumbnail.jpg" width="640" height="360"></video>
💡
Why poster matters
Without poster, the browser shows a black box or the first frame (which is sometimes blank/dark) until the user presses play. A designed poster image looks intentional and loads instantly, unlike waiting for the first video frame to decode.
Section 2
Multiple Sources & preload
Like audio, provide multiple formats via <source> for compatibility. preload controls how much the browser downloads before playback starts.
video-sources.html
HTML
<video controls poster="thumb.jpg" preload="metadata"> <source src="demo.mp4" type="video/mp4"> <source src="demo.webm" type="video/webm"> Your browser doesn't support HTML video. </video>
| preload value | Behavior |
|---|---|
none | Don't download anything until play is pressed — best for data-conscious pages |
metadata | Download just duration/dimensions — good default |
auto | Browser may download the whole video ahead of time |
Section 3
Captions with track
The <track> element adds captions or subtitles from a separate WebVTT (.vtt) file — essential for accessibility and for viewers watching muted (the majority of social video views).
video-captions.html
HTML
<video controls poster="thumb.jpg"> <source src="lesson.mp4" type="video/mp4"> <track kind="captions" src="lesson-en.vtt" srclang="en" label="English" default> </video>
⚠️
kind matters
kind="captions" includes sound effects and speaker labels for deaf/hard-of-hearing viewers. kind="subtitles" assumes the viewer can hear but doesn't understand the language — translated dialogue only. Pick the right one for your content.Section 4
Responsive Video
Set width/height for the correct aspect ratio (same layout-shift benefit as images), then let CSS scale it down on smaller screens.
video-responsive.html
HTML
<style> video { max-width: 100%; height: auto; } </style> <video controls width="800" height="450"> <source src="demo.mp4" type="video/mp4"> </video>
🧩 Knowledge Check — Lesson 20
5 questions to test your video knowledge.
1. What does the poster attribute do?
2. What does preload="metadata" do?
3. What does the <track> element add?
4. What's the difference between kind="captions" and kind="subtitles"?
5. How do you make a video responsive so it scales on smaller screens?
Coding Challenge — Lesson 20
Apply what you learned · Beginner Level
Challenge: Build a Responsive Course Video Player
1. Build a <video> with controls, a poster image, and preload="metadata".
2. Add two <source> elements for mp4 and webm.
3. Add an English captions track.
4. Make it responsive with CSS.
1. Build a <video> with controls, a poster image, and preload="metadata".
2. Add two <source> elements for mp4 and webm.
3. Add an English captions track.
4. Make it responsive with CSS.
💡 Show hints if you're stuck
- Captions:
<track kind="captions" src="captions-en.vtt" srclang="en" label="English" default> - Responsive CSS:
video { max-width: 100%; height: auto; }
Finished this lesson?
Mark it complete to track your progress.
Module 20 of 62Phase 6 — Images & Media