OneTaskBy Tim King · Updated
Video Hero Builder
Background Video Hero Section in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Video Hero Builder works
A video hero builder lays out the big opening section of a landing page with a looping video playing behind the headline. Write the copy, set the overlay so the text stays readable, choose the buttons and copy the HTML, CSS and a few lines of JavaScript for the pause control.
A background video catches the eye in a way a still photo cannot, but it has to stay out of the way of the message. The builder handles the parts that usually go wrong: the video fills the section at any size, the text stays readable, phones play it without a tap, and visitors can stop the movement.
How the video hero builder works
The <video> is positioned behind the content and uses object-fit: cover, so it fills the
section and crops the edges instead of leaving black bars. It carries autoplay, muted, loop
and playsinline, the four attributes that browsers and iPhones need before they will start a
video without a tap. The poster image shows while the video loads and if it never does.
Overlay and readability
White text over moving footage needs contrast. A solid tint darkens the whole frame; a gradient from the bottom or left darkens only behind the words and keeps the rest of the video bright. The fallback background colour shows before the poster loads.
Pause button and reduced motion
Accessibility guidelines ask that anything moving for more than five seconds can be paused. The pause button stops the video and changes its label, and the script pauses the video straight away for visitors whose system asks for reduced motion. The preview uses an animated stand-in so the page stays light.
FAQ
Why does my background video not autoplay on iPhone?
iOS only autoplays video that is muted and has the playsinline attribute; without playsinline
it tries to open the video full screen and refuses to start. Low Power Mode also blocks autoplay,
which is why the poster image matters.
How big should a hero background video be?
Aim for 10 to 20 seconds, 1280 or 1920 pixels wide, no audio track and under about 3 MB. Export a WebM with VP9 or AV1 and an MP4 with H.264 as a fallback. The browser picks the first source it can play.
Will the video slow down my page?
preload="metadata" stops the browser downloading the whole file up front, and the poster image
is what counts for Largest Contentful Paint. Keep the poster small and compressed, and consider a
still image only on slow connections.
Can I use a YouTube video as the background?
You can embed one, but YouTube adds its own controls, branding and a heavy player script, and blocks some autoplay setups. A short self-hosted file in a video tag loads faster and is far easier to control.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Video Bitrate Calculator
File size from bitrate and duration, or the bitrate for a size limit.
Responsive Image Generator
Generate srcset, sizes and picture markup for responsive images.
Lightbox Builder
Build a dependency-free image lightbox with keyboard and swipe support.
Image Gallery Builder
Build a responsive CSS grid photo gallery with captions and hover effects.