HTML <video> Tag
The HTML 5 <video> tag is used to embed video on an HTML document. W3docs HTML tutorial explains how to use the HTML 5 <video> tag with syntax, examples.
The <video> tag is one of the HTML5 elements. It is used to embed a video player in an HTML document. This page covers how to add a video, supply multiple formats for cross-browser support, add captions for accessibility, and the gotchas around autoplay, the poster, preload, and loop attributes.
There are 3 widely supported video formats for the <video> element: MP4/MPEG-4, WebM, and Ogg. Because no single format works in every browser, you typically supply several files using nested <source> elements (or a single src attribute). Large video files are compressed and decompressed with codecs:
- MP4/MPEG-4 — H.264 video with AAC audio. The most broadly compatible format.
- WebM — VP8 or VP9 video with Vorbis or Opus audio.
- Ogg — Theora video with Vorbis audio.
The <video> element is a replaced element with a default display: block. To control how the frame is filled, use the CSS object-fit and object-position properties. To monitor download and playback progress, use the media event attributes.
You can add subtitles or captions with the <track> element and the WebVTT format (covered below). The same element can also play audio-only files, although <audio> is the better choice for sound-only content.
Syntax
The <video> tag comes in pairs. The content is written between the opening (<video>) and closing (</video>) tags.
Example of the HTML <video> tag with the controls, muted and src attributes:
Example of the HTML <video> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video{
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4" playsinline>
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Multiple sources and fallback text
When you list several <source> elements, the browser plays the first one it can decode and ignores the rest. So order them from most preferred to least preferred — usually WebM first (smaller), then MP4 (most compatible) as a reliable fallback. The type attribute lets the browser skip a format it can't play without downloading the file.
Any content placed between <video> and </video> (other than <source> and <track>) is shown only when the browser cannot play any of the sources at all. Use it for a fallback message and a download link.
Always set width and height (or fix the size in CSS) so the browser reserves space before the video loads. This prevents cumulative layout shift (CLS), where content jumps as the player appears.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video width="320" height="240" controls playsinline>
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<!-- Shown only if no source can be played -->
Your browser doesn't support HTML video.
<a href="/build/videos/arcnet.io(7-sec).mp4">Download the video</a> instead.
</video>
<p>Some information about video</p>
</body>
</html>The controls, autoplay, loop, and muted attributes are Boolean attributes — they take no value. Their presence alone turns the feature on.
Captions and subtitles with <track>
For accessibility, add a <track> element pointing to a WebVTT (.vtt) file. The kind attribute tells the browser how to treat the text track:
subtitles— translations of the dialogue for viewers who don't understand the language.captions— a transcription of dialogue plus important non-speech sound (music, sound effects), for viewers who are deaf or hard of hearing.descriptions— a text description of the visuals, intended to be read aloud for viewers who can't see the video.chapters— chapter titles used to navigate the media.
Providing captions for pre-recorded video satisfies WCAG 2.1 Success Criterion 1.2.2 (Captions). Use srclang to set the track's language and default to enable a track automatically.
<video width="320" height="240" controls>
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<track default kind="captions" srclang="en" label="English"
src="/build/videos/arcnet.io(7-sec).vtt" />
</video>A minimal WebVTT file looks like this:
WEBVTT
00:00.000 --> 00:04.000
Welcome to the demo video.
00:04.000 --> 00:07.000
[upbeat music playing]Autoplay (and why it needs muted)
To prevent disruptive ads, most browsers block autoplay when there is sound. As a result, autoplay only works reliably when the video is also muted:
<video autoplay muted loop controls playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Autoplaying media can be a serious accessibility problem — it can distract users, interfere with screen readers, and trigger issues for people with vestibular disorders. Keep autoplaying clips muted, short, and prefer to let users start playback themselves. Always include controls so the video can be paused.
The poster attribute
poster sets a placeholder image shown before the video plays (or until enough data has loaded). Without it, browsers display the first frame, which is often blank.
<video width="320" height="240" controls poster="/build/videos/cover.jpg">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>The preload attribute
preload hints how much the browser should load before playback. It is only a hint — the browser may ignore it (and it is ignored when autoplay is set).
<!-- Don't download anything until the user presses play -->
<video controls preload="none" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Fetch length/dimensions only — a good default -->
<video controls preload="metadata" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Buffer the whole file ahead of time -->
<video controls preload="auto" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>The loop attribute
loop restarts the video automatically each time it ends. It's most useful for short, ambient background clips, which are typically combined with autoplay muted.
<video loop autoplay muted playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Attributes
| Attributes | Value | Description |
|---|---|---|
| autoplay | autoplay | Specifies that the video will start playing automatically as soon as it is ready. |
| controls | controls | Displays controls element allowing the user to control video playback, including volume, seeking, and pause/resume playback. |
| height | pixels | Sets the height of the video player. |
| loop | loop | Specifies that the video will start over again, every time it is finished. |
| muted | muted | Specifies that the video will be initially silenced. |
| poster | URL | Sets an image that will be shown while the video is downloading, or until the user hits the play button. |
| preload | auto, metadata, none | Hints how much content to load before playback (see the values below). Ignored when autoplay is enabled. |
| src | URL | Sets the URL of the embedded video. A <source> element can be used instead. |
| width | pixels | Sets the width of the player. |
The preload attribute accepts three values:
- none — the video should not be preloaded.
- metadata — only metadata such as length and dimensions is fetched.
- auto — the whole video file may be downloaded.
The <video> tag also supports the Global Attributes and the Event Attributes.
Related elements
<source>— specifies one of several media files for<video>or<audio>.<track>— adds captions, subtitles, or chapters as a WebVTT track.<audio>— embeds sound-only content.