References

Beginner-friendly references for web development, with live, editable examples.

The HTML <video> tag

Element All modern browsers Updated
Quick answer

The HTML <video> element embeds a video player. Add controls for the native UI, set the file with src (or several <source> elements), and provide captions with a <track>.

Overview

The <video> element plays video natively in the browser — no plugin required. Point it at a file with the src attribute, or nest several <source> elements so the browser can pick a format it supports. Add the controls attribute for the built-in player and a poster image to show before playback begins.

Autoplay is deliberately restricted. Browsers only allow a video to start on its own when it is also muted (and usually playsinline on mobile, so it does not jump to fullscreen). This is a deliberate guard against intrusive, noisy pages, so plan for a muted autoplay or a click-to-play experience rather than fighting it.

Accessibility is not optional here: always provide captions and subtitles through a <track> element so deaf and hard-of-hearing users get the speech and important sounds. Set width and height (or use the CSS aspect-ratio) so the player reserves space and the page does not jump as it loads.

Syntax

<video controls width="640" poster="cover.jpg">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
  <track kind="captions" src="caps.vtt" srclang="en" label="English" default>
</video>

Attributes

The <video> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
autoplay A boolean attribute — present or absent. Starts media playback automatically.
controls A boolean attribute — present or absent. Shows native media playback controls.
crossorigin anonymous (default when present) use-credentials Sets the CORS mode for fetching the resource.
height A non-negative integer (pixels). Sets the height of the element in pixels.
loop A boolean attribute — present or absent. Replays media from the start when it ends.
muted A boolean attribute — present or absent. Mutes the media by default.
playsinline A boolean attribute — present or absent. Plays a video inline instead of fullscreen.
poster A URL pointing to an image. Sets a placeholder image for a video.
preload none metadata auto (default) Hints how much media to preload.
src A URL pointing to the resource. Specifies the URL of an embedded resource.
width A non-negative integer (pixels). Sets the width of the element in pixels.

Example

Live example 
<video controls width="320" poster="https://codeshack.io/web/img/icon.png" style="max-width:100%;background:#000;border-radius:6px;"></video>

Best practices

  • Add the controls attribute so users can play, pause and seek.
  • Offer multiple formats with nested <source> elements for broad browser support.
  • Always provide captions with a <track> element.
  • For autoplay, the video must be muted; set dimensions or aspect-ratio to prevent layout shift.

Accessibility

Provide synchronized captions (and ideally subtitles and descriptions) via <track> so deaf and hard-of-hearing users can follow the video. Ensure the player is keyboard-operable (native controls are), and never auto-play media with sound.

Frequently asked questions

How do I embed a video in HTML?
Use a <video> with controls and either a src or nested <source> elements pointing at your video files.
How do I autoplay a video?
Add autoplay muted (and usually playsinline on mobile). Browsers block autoplay with sound, so the video must be muted.
Why is my video autoplay not working?
It is almost certainly not muted. Browsers only allow autoplay for muted videos; add the muted attribute.
How do I add captions to a video?
Nest a <track> element with kind="captions" pointing at a WebVTT file.
var wbr