Video (<video>)

The <video> element brought native, plugin-free video playback to the web — the same way <audio> did for sound. It ships with a browser-native control bar, a full JavaScript API, and support for multiple source formats so every browser can find one it understands.

Basic Usage

video-basic.html

HTML

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

Always set width/height

Declaring width and height (or their CSS equivalents) reserves the correct space before the video loads, preventing a layout shift once it appears — the same principle as sizing <img> elements.

Key Attributes

Attribute	Effect
`controls`	Shows the native play/pause/seek/volume/fullscreen bar.
`poster`	An image shown before playback starts, instead of a blank/black frame.
`width` / `height`	Reserves layout space and sets the intrinsic display size.
`autoplay`	Starts playback on load — see the autoplay restrictions below.
`loop`	Restarts playback when it ends.
`muted`	Starts (and can stay) muted.
`playsinline`	On iOS Safari, plays inline instead of forcing fullscreen.

video-attributes.html

HTML

<video
  src="product-demo.mp4"
  poster="product-demo-thumbnail.jpg"
  width="800"
  height="450"
  controls
></video>

Multiple <source> for Format Fallback

Just like audio, no single video codec/container is universally supported. The standard pattern is offering WebM (smaller, royalty-free, great Chrome/Firefox support) followed by MP4/H.264 (broadest overall support, including older Safari).

video-sources.html

HTML

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

  Your browser doesn't support HTML5 video.
  <a href="demo.mp4">Download the video</a> instead.
</video>

List sources in your preferred order — the browser plays the first one it can decode.
The type attribute lets the browser skip downloading a source it already knows it can’t play.
Fallback text/markup after the <source> elements only shows if <video> itself is unsupported (extremely rare today).

The Autoplay-Muted Background Video Pattern

A very common design pattern — a silent, looping video used as a hero background — relies on a specific combination of attributes that browsers are willing to autoplay without any user interaction.

background-video.html

HTML

<video
  autoplay
  muted
  loop
  playsinline
  poster="hero-fallback.jpg"
  width="1920"
  height="1080"
>
  <source src="hero-background.webm" type="video/webm" />
  <source src="hero-background.mp4" type="video/mp4" />
</video>

Attribute	Why it’s required for autoplay
`muted`	Browsers only allow unattended autoplay when there is no sound to annoy the user.
`playsinline`	Without it, iOS Safari forces the video into fullscreen the moment it plays — breaking a background video's layout.
`loop`	Not required for autoplay, but almost always paired with it for a seamless background effect.

Autoplay with sound is blocked, no exceptions

There is no attribute combination that reliably autoplays a video *with* sound without prior user interaction — every major browser blocks it. Design your UI so the first sound the user hears is something they explicitly asked for.

poster — the Placeholder Frame

Without a poster, the video area is blank (often black) until the first frame decodes. A poster image gives an immediate, meaningful preview — especially valuable on slow connections or when preload="none" is set.

video-poster.html

HTML

<video src="tutorial.mp4" poster="tutorial-thumb.jpg" controls preload="none"></video>

Basic JavaScript Control

video-js-control.html

HTML

<video id="player" src="clip.mp4" width="640" height="360"></video>
<button id="toggle">Play</button>

<script>
  const player = document.getElementById('player');
  const btn = document.getElementById('toggle');

  btn.addEventListener('click', () => {
    if (player.paused) {
      player.play();
      btn.textContent = 'Pause';
    } else {
      player.pause();
      btn.textContent = 'Play';
    }
  });
</script>

Captions matter

Any video with spoken dialogue should ship a <track kind="captions"> alongside it — covered in depth in the captions & subtitles tutorial. Captions help deaf/hard-of-hearing viewers and anyone watching with the sound off.

Quick recap

Set width/height and a poster to avoid layout shift, provide WebM + MP4 sources for broad codec coverage, and remember the autoplay muted loop playsinline combination is the only reliable way to autoplay video.