Video on the web: the basics that matter

Adding video to a page is one of the most direct ways to lift engagement and conversions, and as devices and connections get faster, it's becoming a practical option for more sites. But a video file is almost certainly the largest asset your page will ship. If it isn't set up correctly, the result is a stalled, frustrating experience for the very users you were trying to impress.

This guide covers the essentials of using the HTML5 <video> tag for direct file delivery, not streaming services. The goal is simple: make sure your video loads fast, plays smoothly, and uses data responsibly.

Start with the right file: the <source> tag

A basic <video> tag pointed at one file works, but it leaves playback quality to chance. The real performance lever is offering the browser multiple versions of the clip via the <source> tag. The browser walks through the list in order and picks the first format it can play, so you prioritize your best-optimized files first.

A typical setup offers three choices:

  • WebM (VP8 or VP9 codec): Supported by roughly 78% of global users, it's a modern format with excellent compression.
  • MP4 with H.265: A newer codec supported on iOS and newer Macs, offering improved compression for the same quality.
  • MP4 with H.264: The broadest compatibility, at about 92% of users, but an older format that yields significantly larger files than WebM or H.265.

The size difference is dramatic—in one comparison, a two-minute clip's file size varied considerably depending on the codec used. Choosing the smallest viable file is the single best optimization you can make. A smaller download starts playback sooner, fills the buffer faster, and reduces stalls during viewing. It also cuts server load, offsetting the storage cost of maintaining multiple copies of each video.

Control the download: the preload attribute

Playback can't start until some video data is on the device. The preload attribute governs how much of the file is fetched when the page loads. It takes three values:

  • auto: Downloads the entire video regardless of user action. This gives the fastest start when play is pressed, but wastes bandwidth and server resources if the visitor never watches. Use it only when playback is highly likely.
  • metadata: The browser fetches roughly the first 3% of the file. This is the default in Chrome and Safari. It keeps local data for a quick start while holding data costs to a fraction of auto.
  • none: Downloads nothing ahead of time. This is the most data-efficient option and suits videos that are present on the page but unlikely to be played. It also respects users browsing in Lite mode. Expect a slower start when play is finally pressed, since the download begins only then.

Make it look right: the poster attribute

Without a poster, a video element renders as a black rectangle until playback begins—a dead spot on an otherwise lively page. The poster attribute fixes that by specifying an image to display in the video window before it plays.

The tradeoff is that the poster is an additional image download that delays the video fetch. If a video autoplays, skip the poster attribute so you don't push the video file further down the network queue.

Controls, audio, and looping

A few more attributes determine how users interact with your video:

  • controls: Adds the browser's playback UI. Omit it only for background or looping clips where there's nothing to control.
  • muted: Starts playback with the sound off. If you don't provide controls, the video stays muted for the whole run. If that's the intent, consider removing the audio track entirely—demuxing—to shrink the file further.
  • loop: Replays the video continuously, making it a viable, much smaller replacement for animated GIFs.

Autoplay: with a catch

To start a video immediately—say, as a decorative background—add the autoplay attribute. But on mobile browsers, autoplay requires the muted attribute as well. Without it, the browser blocks the autoplay entirely.

Getting video onto your site is just the first step. Paying attention to file format, preload behavior, and playback attributes is what keeps that video watchable—and your customers engaged rather than frustrated.