`<video>` Video

Adds a video player.

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

<video> plays video. controls adds play and pause buttons, width and height reserve space, and poster sets a preview image. Offer different formats with several <source> elements and add captions with <track>.

autoplay works only when the video is also muted. Add playsinline so phones do not force full screen. Anything between the tags is shown by browsers that cannot play video.

poster, controls, autoplay, muted and playsinline are all in the video element definition (opens in a new tab). Try them out in the Audio and Video lesson.

Syntax

<video controls width="640" height="360" poster="poster.jpg">
  <source src="clip.mp4" type="video/mp4">
</video>

When to use it

When you host the file yourself, <video> is the element. Think product demos, screen recordings in documentation, short clips in news articles and course lessons. The file is yours, no third-party trackers come along, and captions come from your own track.

Long videos with a big audience are often better off on a video platform embedded with an iframe. The platform deals with adaptive streaming and bandwidth. For a tiny looping animation an animated GIF is quicker to drop in, yet a muted MP4 of the same clip is usually many times smaller.

Some large MP4s start slowly. The browser needs the file's index before playing, and some encoders put that index at the end. Export with the fast start or web optimized option and playback begins while the rest is still downloading. A page with several videos should also set preload="none" or preload="metadata".

Attributes

Attribute	What it does
`src`	URL of the video file.
`controls`	Shows playback controls.
`width`	Display width in pixels.
`height`	Display height in pixels.
`poster`	Image shown before playback starts.
`autoplay`	Starts playing automatically (needs muted).
`muted`	Starts with the sound off.
`loop`	Restarts when it reaches the end.
`playsinline`	Plays inside the page on phones.
`preload`	none, metadata or auto.
`crossorigin`	CORS mode for the request.

Live example

Edit the code and watch the preview.

<video controls width="400" poster="mountains.svg">
  <source src="flower.webm" type="video/webm">
  <source src="flower.mp4" type="video/mp4">
  Sorry, your browser cannot play this video.
</video>

More examples

Player that loads on demand

The poster appears at once. Because of preload="none", the video itself is fetched only when someone presses play. Browsers that can't play either format get the download link.

<video controls preload="none" width="400" height="200" poster="mountains.svg">
  <source src="valley-tour.webm" type="video/webm">
  <source src="valley-tour.mp4" type="video/mp4">
  <a href="valley-tour.mp4">Download the valley tour (MP4)</a>
</video>

Responsive video in a figure

width and height fix the aspect ratio. The CSS lets the player shrink on small screens and keep that ratio. Below it, the figcaption tells everyone what the clip shows.

<figure style="margin:0">
  <video controls preload="none" width="640" height="320" poster="mountains.svg" style="width:100%;max-width:640px;height:auto">
    <source src="sunrise.mp4" type="video/mp4">
  </video>
  <figcaption>Sunrise over the valley, filmed in one minute.</figcaption>
</figure>

Tip: Use controls and captions. Autoplay is for muted background clips only.

Browser support

All current browsers support video. MP4 with H.264 plays everywhere and WebM with VP9 in every current major browser. AV1 is spreading but not everywhere yet. Keep an MP4 source as the last fallback. The video element support table (opens in a new tab) has details.

Accessibility

Add captions with track (WCAG 1.2.2), plus an audio description or transcript when the visuals carry information. Moving video that starts by itself and runs longer than 5 seconds needs a pause control (WCAG 2.2.2). The W3C note Understanding Pause, Stop, Hide (opens in a new tab) explains that 5-second rule.

Common mistakes

Wrong

<video src="intro.mp4" autoplay></video>

Right

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

Browsers block autoplay with sound. Controls, a poster and dimensions make a usable, stable player.

Frequently asked questions

How do I autoplay a video in HTML?

Mute it. Browsers allow autoplay only for muted video, so you need both attributes: <video autoplay muted loop playsinline>. playsinline keeps iOS from switching to full screen. Keep autoplaying clips short or give them a way to stop, and expect that people who prefer reduced motion may not want them at all.

Which video format works in all browsers?

MP4 with H.264 video and AAC audio. It plays in every modern browser and is the safest single format. WebM with VP9 or AV1 gives smaller files and is widely supported too. List the most efficient format first in <source> elements with a type, then MP4 as the fallback. Wikipedia's HTML video (opens in a new tab) article summarises format support.

Practise it

Audio and Video (Module 3: Links and Media)

Related media elements

<img>Displays an image; src and alt required.<picture>Holds several image sources and lets the browser choose one.<source>One alternative file inside picture, audio or video.<track>Adds WebVTT captions, subtitles or chapters to audio and video.<figure>A self-contained image, chart, code listing or quote, optionally captioned.<figcaption>A figure's caption, placed as its first or last child.<audio>Plays sound, like music or a podcast episode.<iframe>Shows another web page inside a frame on yours.<embed>Inserts external content, like a PDF, that the browser or a plugin displays.<object>Embeds an external resource and holds fallback content for it.<canvas>A bitmap surface that JavaScript draws graphics on.<svg>Vector graphics drawn right in the HTML, sharp at any size.<math>Math notation written as MathML markup.<map>Holds the clickable areas that turn an image into an image map.

<video> Video