A homepage video background is a muted, looping clip placed behind the hero headline and call to action. You can add one with a native HTML video element and CSS, or use the WordPress Video block; either way, keep the message readable and provide a still image for visitors who do not get playback.
The practical decision is not only how to make the video fill the hero. You also need to decide whether motion helps explain the page, how the file will affect loading, and what the visitor sees when autoplay is blocked or the connection is slow.
Start with the job of the hero
Before choosing a file or editing a theme, write down what the homepage hero needs to do. A small business might need to show a product in use while making its opening hours and booking link immediately clear. A study channel might want to establish a calm visual mood, but the channel name and the next action still need to be available as ordinary text.
That distinction matters because a background clip is usually decorative. If a visitor must notice a safety instruction, product detail or offer, do not make the video the only place that information appears. Put the essential meaning in page copy, and treat the moving image as supporting atmosphere.
Check the actual hero on the devices your visitors use. A wide desktop crop may show the whole scene, while a narrow phone crop can cut off the subject. A person positioned near the edge of the frame might disappear behind a cropped layout. Choose footage with enough visual space around its subject, and test the crop at the dimensions the page will use.
The headline and button should remain easy to read over both bright and dark frames. A translucent overlay can help, but do not assume one fixed colour will work for every clip. Preview the full loop, including its lightest frame, and adjust text placement or the overlay if contrast changes too much.
Choose HTML/CSS or the WordPress block
For a custom site, the native <video> element gives you direct control over sources, playback attributes, poster image and positioning. WordPress offers a no-code route through its Video block, with editor settings for common playback choices. The best route depends on the existing site: a theme or page builder may already have a background-video control, while a custom design may need the explicit layout control of HTML and CSS.
| Route | Useful when | Things to check |
|---|---|---|
| Native HTML and CSS | You or your developer can edit the hero markup and styles | Source formats, poster, responsive crop, autoplay behaviour and fallback |
| WordPress Video block | The site is managed in the block editor and its theme supports the layout | Block settings, theme styling, whether the video is uploaded or linked, and download behaviour |
In a custom hero, place the video within the hero container and the text in a separate content layer. The following is a starting point, not a drop-in guarantee for every theme:
<section class="hero">
<video class="hero__video" autoplay muted loop playsinline poster="/media/hero-poster.jpg" aria-hidden="true">
<source src="/media/hero-video.webm" type="video/webm">
<source src="/media/hero-video.mp4" type="video/mp4">
</video>
<div class="hero__content">
<h1>Your headline</h1>
<p>Keep the message and action in regular page text.</p>
</div>
</section>
.hero {
position: relative;
min-height: 60vh;
overflow: hidden;
isolation: isolate;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.hero__content {
position: relative;
z-index: 1;
}
The muted, loop, playsinline and poster attributes describe the intended background behaviour. Muted playback is more likely to be eligible for autoplay than playback with sound, but browser policy and visitor settings still matter. MDN explains the video element and its attributes and the autoplay policies. Keep the poster meaningful because the video may not start.
In WordPress, add a Video block and choose an upload, item from the media library, or URL. The WordPress Video block documentation describes settings such as autoplay, loop, mute, inline playback, controls, preload and poster. For a custom background treatment, check the theme or page builder before adding custom CSS; existing controls may already handle layering and mobile display.
Set up playback without hiding failure
Muted looping video is a common background pattern because audio would be intrusive and audible autoplay is often restricted. Still, treat autoplay as a request, not a promise. A visitor's browser or settings can prevent motion, and the page must make sense when only the poster image appears.
The poster attribute gives the browser an image to show while video data is unavailable. Select a frame or prepare a still that communicates the same mood as the clip and works with the headline overlay. Do not use a blank placeholder or an unrelated image that makes the page look broken when playback does not begin.
For decorative footage, aria-hidden="true" indicates that the video is not content to be announced separately; it does not make meaningful information in the video accessible. Keep any message conveyed by the footage in text, and do not rely on motion alone to explain a product or instruction. If the video carries meaningful spoken or visual content, it is no longer just a background: provide appropriate controls and an accessible way to understand that content.
A looping image can be distracting, particularly when it continues indefinitely behind reading. Consider whether the movement is subtle enough for the page and whether visitors need a way to pause it. The guidance in web.dev's video performance advice is that autoplay should be used only when necessary and anticipated by the user. If a still image communicates the same thing, that may be the better choice.
Keep the video from dominating page loading
An autoplaying video can begin downloading early, including when it is not yet visible. That can compete with the headline, hero image and other resources the page needs to render. A large file may make the page feel slow before the visitor has gained anything from the motion. There is no universal file size or loading setting that makes every hero acceptable; the impact depends on the clip, the connection and the rest of the page.
Start with a short clip that can loop without a visible jump. Compress it for web delivery, and remove an audio track if the background is always muted: a track visitors will never hear still adds data. Avoid placing several large background videos on the same page. If the footage does not add enough to justify the transfer, use a still image instead.
A low preload hint should not be treated as a guarantee that an autoplaying video will wait. The HTML video reference notes that autoplay takes precedence over preload hints. For below-the-fold video, deferring the download until the visitor approaches it can help; web.dev discusses a poster and Intersection Observer approach. A visible hero has a different trade-off: loading early may make motion appear sooner, but can compete with initial page rendering. Test the real page rather than relying on an attribute as a performance fix.
Keep a static fallback available for slow connections, blocked autoplay, and layouts where motion is disabled. For a homepage hero, that fallback can simply be the poster image, provided the headline and action remain useful over it. Check the page on a phone and a slower connection as well as on a desktop connection. If the page's main content arrives late or the video delays access to the call to action, reduce the clip's weight or remove it.
If media delivery becomes a concern because the files are large or the site receives substantial traffic, review how the site currently serves its media before choosing a hosting change. A basic implementation can use the site's media library or an existing URL; a separate delivery arrangement is not automatically necessary.
Make the background usable and accessible
The safest content model is to keep the hero's meaning in normal HTML text. A visitor should be able to read the offer, understand the page and follow the call to action without seeing the video. This also helps when a browser does not autoplay, when images are slow to load, or when the visitor is using assistive technology.
For a purely decorative loop, avoid controls that imply the video contains a separate programme to watch. But do not remove control from meaningful, continuous motion simply to preserve a clean design. If the clip communicates information, give visitors access to that information in text and consider controls and captions where relevant. A background video without playback control can be inaccessible when the video itself conveys content.
Check contrast in motion, not just in a screenshot. A white headline over a dark opening frame can become hard to read as a bright frame passes behind it. Use a suitable overlay, place text over a quieter region, or choose another clip. Make sure any button remains visually distinct and usable with a keyboard; video styling should not cover or obstruct page controls.
Test the design at narrow widths and with the video unavailable. CSS such as object-fit: cover fills the hero but crops the image, so it cannot guarantee that the same subject stays centred across every viewport. The poster should be cropped with the same framing in mind. If the composition only works at one screen size, adjust the footage or use a different still for that layout.
Publish and test on the real homepage
Do not judge the implementation only inside an editor preview. Publish it to a test page or staging copy and check the actual theme, caching, media URL and responsive rules. In WordPress, inspect whether the selected theme or page builder changes the block's dimensions or playback controls. On a custom site, confirm that the hero container has a defined size and that the text layer remains above the video.
Use a simple test pass:
- Load the page with autoplay available and confirm that the clip is muted, inline and looping as intended.
- Check the page with autoplay unavailable or the media request failing; the poster and text should still make the hero complete.
- Resize the viewport to see what the crop removes and whether the button remains visible.
- Scroll through the page and inspect whether background video downloads earlier than it needs to.
- Check the headline against bright and dark moments in the loop, not only its first frame.
If you use more than one source format, verify that each source URL works and that the browser can choose a supported format. MDN's video reference explains the use of separate <source> elements. A broken first source can otherwise make a correct-looking snippet behave differently from the editor preview.
Where the homepage leads into a video channel or a long-running broadcast, keep the website's hero and the channel's video workflow as separate jobs. A guide to keeping a YouTube loop stream between videos addresses a channel playback issue, not a website hero. Similarly, choosing a codec for YouTube Live is relevant when preparing stream media, but it does not replace web video testing.
Keep ownership and updates clear
A background often becomes stale after a promotion, seasonal campaign or product change. Record who owns the source file, poster and homepage copy, and where the current versions are stored. When an offer or product changes, review the footage as well as the text; a clip can continue to show packaging, staff, or surroundings that are no longer representative.
Keep the original edit or a high-quality master separate from compressed website exports. That makes it easier to produce a new crop or format without repeatedly degrading an already compressed file. Give files clear names and note which page uses them, so a future editor does not replace the hero video without checking the poster and mobile crop.
If your site is paired with a continuous YouTube channel, document those assets separately from the homepage files. A 24/7 prerecorded YouTube workflow has different playback and account considerations. For a broader explanation of persistent keys in a channel workflow, see how a YouTube persistent stream key is used. These are useful distinctions when the same business manages both a web presence and a broadcast, but neither is a substitute for maintaining the website's poster and hero layout.
Schedule a review when the homepage offer or visual identity changes, and check the page after theme, plugin or browser-related updates. Retest the fallback as well as autoplay. The goal is not to preserve motion at any cost; it is to keep the page clear and usable even if the media or its behaviour changes.
Before committing, compare the operating options on the pricing page. When the file and channel are ready, start free — 24-hour trial, no card.
FAQ
Does a homepage video background always autoplay?
No. Muted playback is more likely to be eligible than playback with sound, but browser policies and visitor settings differ. Use a poster image and keep the hero complete when playback does not begin.
Can I use a WordPress Video block for a background?
Yes, the block provides playback settings, and a theme or page builder may offer a background treatment. Check the published page because the block's styling, crop and download behaviour depend on the site setup.
Should the headline be part of the video?
No. Keep headlines, offers and calls to action as page text so they remain readable and useful when the clip is unavailable. If the video conveys essential information, present that information accessibly outside the decorative background as well.
Will a video background slow my homepage?
It can, because autoplay may begin downloading early and compete with resources needed to render the page. Use a short compressed clip, keep a still fallback and test the actual page; if motion delays the useful content, use an image instead.