Video is the heaviest thing most pages ship and the one nobody measures. A four-megabyte hero loop is four megabytes downloaded before anyone decides whether to stay, and on a phone it is also the reason the page feels warm and the battery drops.
None of that is an argument against video. It is an argument for knowing which of the three jobs you are doing.
The background loop
Video as texture: a hero, muted, autoplaying, on a loop. Hero With Video by Hossain Jahed and Hero Video by youcefbnm are the shapes, and Video Scroll Hero by Isaiah ties playback to scroll position.
The requirements are specific and mostly attributes: muted, playsinline, loop, autoplay, and preload="metadata" rather than auto. Without playsinline, iOS opens the video full screen instead of playing it in place. Without muted, autoplay is blocked entirely, and it should be.
The budget: under 10 seconds, under 2MB, no audio track at all, and a poster image so the first paint is not a black rectangle. If it cannot fit that, it wants to be an animated background instead, which the background guide covers.
The click-to-play demo
The highest-value video on most products, and the one people build worst. Hero Video Dialog by dillionverma is the pattern: a poster with a play button that opens the real video in a dialog.
Why this shape wins: nothing downloads until someone asks. The poster is one image, the video request happens on the click, and the page cost is a fraction of an embedded player. Video Thumbnail Player by Ravi Katiyar and Thumbnail button video player by Arunachalam are the inline versions of the same idea.
The real player
When the video is content rather than decoration. Video Player by Chetan Verma is the custom-controls shape, and Video Player Pro by Ruixen UI is the fully featured one.
The same warning as the audio guide: the native element already gives you keyboard control, screen reader announcements and the platform's own picture-in-picture and casting. Replacing it means rebuilding all of that, and the parts that get skipped are captions, keyboard seeking and the buffering state.
Captions are not optional
The one thing in this article that is a requirement rather than a recommendation. A video with speech needs captions: for deaf and hard-of-hearing readers, for the large share of people who watch with sound off, and for search and answer engines, which read the transcript and cannot watch the video.
A <track kind="captions"> with a VTT file is the mechanism. Auto-generated captions from a transcription service are a reasonable starting point and a bad ending point, because names and product terms are exactly what they get wrong.
Publishing the transcript as text on the page is the cheapest version of the same benefit, and it is the only part of a video that anything without eyes can read.
Hosting and format
Three practical notes that decide the bill and the speed.
Do not serve video from your own origin at scale. A video host gives you adaptive bitrate, so a phone on a slow connection gets a smaller rendition instead of buffering the 1080p one.
Ship modern codecs with fallbacks. Multiple <source> elements let the browser pick, and the newer codecs are meaningfully smaller than H.264 at the same quality.
An embedded player is a third-party dependency. A standard embed pulls scripts and cookies and can be a large share of a page's total weight. A facade - poster image, real embed on click - is the standard fix, and it is the same pattern as the click-to-play dialog above.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
<video> with controls | Correct behaviour, captions and PiP for free | The platform's look |
| A video host | Adaptive bitrate, thumbnails and a global CDN | A per-minute or per-view bill |
| Media Chrome / Vidstack | Custom controls without rebuilding the behaviour | A dependency |
| 21st | Hero loops, click-to-play dialogs and custom players | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a video component, get the previews inline, and let the agent write the file.
Frequently asked
- Why does my background video not autoplay?
- It needs muted, playsinline, loop and autoplay together. Without muted, browsers block autoplay entirely and are right to. Without playsinline, iOS opens the video full screen instead of playing it in place, which is the single most common report on this pattern.
- How heavy should a hero video be?
- Under ten seconds, under two megabytes, no audio track, preload set to metadata rather than auto, and a poster image so the first paint is not a black rectangle. If it cannot fit that budget, the section wants an animated CSS or canvas background instead of a video.
- What is a video facade?
- A poster image with a play button that loads the real player only on click. It is the standard fix for third-party embeds, which otherwise pull scripts and cookies into every page load, and it is the same shape as a click-to-play demo dialog: nothing downloads until someone asks.
- Do videos need captions?
- Yes, whenever there is speech. For deaf and hard-of-hearing readers, for the large share of people watching with sound off, and for search and answer engines, which read the transcript and cannot watch. A track element with a VTT file is the mechanism, and auto-generated captions are a starting point rather than an ending one.