HTML: video

The <video> element embeds a video player in a page and can provide controls, a poster image, and captions.

What you will learn

How to embed a video with controls
How to provide a fallback source or message
How captions and poster images improve the experience

Minimal example

<video controls poster="preview.jpg" width="640">
  <source src="lesson.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>

The controls attribute gives users play, pause, and volume controls. Keep the video responsive with CSS such as max-width: 100%.

Add captions

<video controls>
  <source src="lesson.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
</video>

Captions make spoken content available to deaf or hard-of-hearing users and help people watching without sound.

Autoplay and accessibility

Autoplay can be disruptive and is often blocked unless the video is muted. Do not autoplay important content without user control. Provide a pause mechanism and avoid flashing content.

Common mistakes

Do not remove controls unless you provide an accessible custom player.
Provide captions for meaningful spoken content.
Do not depend on one codec or format without a fallback plan.