HTML Video: The video Tag, poster, source and Captions

What you will learn

The <video> element does for moving pictures what <audio> does for sound — it embeds a real video player right on the page, no plugin required. Much of what you learned in the audio lesson carries over directly (controls, autoplay, loop, muted, preload, <source>), so this lesson focuses on what’s different about video: poster, sizing with width/height, why you can’t just paste a YouTube link into src, and how to add captions with <track>.

The basic video player

<video src="intro.mp4" controls width="640" height="360"></video>

• <video> embeds the player.
• src points to the video file.
• controls shows the browser’s built-in player: play/pause, a seek bar, volume, fullscreen, and usually playback speed. Exactly like <audio>, always include controls unless you are deliberately building your own player with JavaScript.
• width/height set the player’s size in pixels, as plain numbers — not "640px", just "640". (This one detail trips up a lot of beginners, because it looks like it should match CSS syntax, and it does not.)

Offering multiple formats with <source>

Exactly like <audio>, you can offer several video formats and let the browser choose the first one it supports:

<video controls width="640">
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
  Your browser does not support the video element.
</video>

Format	File extension	Notes
MP4 (H.264)	.mp4	The safest choice — supported almost everywhere
WebM	.webm	Open format, often smaller files, very good browser support today
OGG (Theora)	.ogv	Older open format, rarely needed now

In practice: offering MP4 alone covers the vast majority of visitors today. Add WebM as a second <source> if file size matters a lot to you (it’s frequently smaller at similar quality).

A common mistake: writing type="mp4/webm" or another made-up value on a single <video src="...">. The type attribute only exists on <source>, and it must be one real MIME type per source — video/mp4, video/webm, and so on, never a slash-separated guess. If you’re using src directly on <video> for a single format, you don’t need type at all.

poster: the image shown before playback

<video controls width="640" poster="video-thumbnail.jpg">
  <source src="intro.mp4" type="video/mp4">
</video>

poster sets an image shown in place of the video before the visitor presses play — a movie’s cover art, a meaningful frame from the clip, or a custom thumbnail. Without it, the browser shows either a black rectangle or the video’s very first frame, which is often not the most flattering choice. Always set a poster for anything the visitor will see before choosing to play it — it makes the page look considerably more finished.

autoplay, muted, loop: same rules as audio

These behave exactly as they do on <audio> — worth a quick recap since video autoplay is even more common (and even more likely to annoy people) than audio autoplay:

<!-- A background-style clip: muted autoplay is the pattern that actually works -->
<video width="640" autoplay muted loop>
  <source src="background-loop.mp4" type="video/mp4">
</video>

• autoplay starts the video the instant the page loads. Browsers block autoplay with sound by default — it only reliably works when paired with muted.
• muted starts the volume at zero (and, as above, is required in practice for autoplay to work).
• loop restarts the video automatically when it ends — fine for a short background clip, wrong for a full-length video the visitor is actually watching.

The same rule from the audio lesson applies here, even more strongly for video: don’t autoplay video with sound. Let controls and a poster invite the visitor to press play themselves.

Captions: <track>

Unlike audio, <video> does have a built-in way to add captions and subtitles — the <track> element:

<video controls width="640" poster="thumbnail.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  <track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
  <track src="captions-hi.vtt" kind="captions" srclang="hi" label="Hindi">
</video>

• src points to a caption file, written in a format called WebVTT (.vtt) — a simple text file with timestamps and the matching text for each moment in the video.
• kind is usually captions (dialogue plus sound effects, meant for viewers who can’t hear) or subtitles (just dialogue, usually a translation for viewers who can hear but don’t understand the language).
• srclang and label identify the language, and let the visitor choose between multiple caption tracks from the player’s menu if you provide more than one.
• default marks which track should be turned on automatically.

A quick look at what a .vtt file looks like, so it isn’t a mystery:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to this HTML tutorial.

00:00:03.500 --> 00:00:07.000
Today we're learning about the video element.

Adding real captions is genuinely valuable — for viewers who are deaf or hard of hearing, for anyone watching with the sound off (extremely common on phones), and it helps search engines understand what your video is about. As a beginner, it’s enough to know <track> exists and roughly how it works; generating accurate .vtt files is usually done with a transcription tool rather than by hand.

A note on YouTube and other hosted video

You cannot put a YouTube (or Vimeo, or similar) page link directly into <video src="...">:

<!-- This does NOT work -->
<video src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" controls></video>

<video> expects a direct link to an actual video file (an .mp4, .webm, and so on) that the browser can download and play frame by frame. A YouTube watch page is not a video file — it’s a whole interactive web page with its own player, ads, comments and JavaScript. To embed a YouTube (or similar) video, you use an <iframe> instead, which embeds YouTube’s own player inside your page:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  allowfullscreen
></iframe>

You’ll cover <iframe> and embedding properly in its own lesson. The rule to remember here: <video> is for video files you (or your server) actually host; <iframe> is for embedding someone else’s video player.

A complete example

<h3>Getting Started with HTML — Episode 1</h3>

<video controls width="640" poster="episode-1-thumb.jpg" preload="metadata">
  <source src="episode-1.mp4" type="video/mp4">
  <source src="episode-1.webm" type="video/webm">
  <track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
  Your browser does not support the video element.
  <a href="episode-1.mp4">Download the video</a> instead.
</video>

Common mistakes

• Forgetting controls. Without it, the visitor cannot play, pause or adjust anything.
• Writing width/height with "px", like width="400px". These attributes take a plain number: width="400".
• Using a made-up or slash-separated type value, like type="mp4/webm". Use one real MIME type per <source>: video/mp4, video/webm.
• Autoplaying video with sound. It gets blocked in most browsers anyway, and it’s jarring where it does work — pair autoplay with muted, or better, skip autoplay entirely.
• Skipping poster, leaving the player showing a black box or a random first frame before playback starts.
• Trying to paste a YouTube link into <video src="...">. Use <iframe> for embedding another site’s hosted video player.
• Providing no captions at all on spoken content, making it inaccessible to deaf and hard-of-hearing viewers, and unusable to anyone watching muted.

Interview-style questions

Why doesn’t <video src="https://youtube.com/watch?v=..."> work? Because <video> needs a direct link to a video file the browser can play, not a full web page with its own embedded player — YouTube videos are embedded with <iframe> instead.

What does the poster attribute do? It sets an image shown in place of the video before the visitor presses play, instead of a black box or an arbitrary first frame.

How do you add captions to a video? With one or more <track> elements inside <video>, pointing to a WebVTT (.vtt) file and specifying kind, srclang and label.

Why is width="400px" wrong on a <video> element? The width and height attributes take a plain pixel number, not a CSS-style value with units — width="400" is correct.

Practice

1. Use the Practice in Editor button. Change the poster image on the first player to a different image URL and reload to see it change.

2. Add a <track> element to the first player pointing at a caption file (even a fake file name is fine for practice), with kind="captions", srclang="en" and label="English".

3. Explain in your own words why the second player’s autoplay actually works while a plain <video autoplay> (no muted) usually does not.

4. Fix this code (it has three mistakes: an invalid type value, width written with px, and a YouTube link used directly as src):

   <video src="https://www.youtube.com/watch?v=abc123" type="mp4/webm" width="500px" controls></video>

Recap

• <video> embeds a video player; always add controls, and set width/height as plain numbers, no units.
• Use <source> elements with a real type (like video/mp4) to offer multiple formats, MP4 being the safest single choice.
• poster shows a chosen image before playback starts — always set one for a polished look.
• autoplay needs muted to reliably work, and video autoplay with sound is even more disruptive than audio autoplay — avoid it.
• <track> adds captions or subtitles from a WebVTT (.vtt) file, something <audio> has no built-in equivalent for.
• You cannot embed a YouTube (or similar) link with <video src="..."> — use <iframe> for hosted video players instead.