OneTaskBy Tim King · Updated
Video Background Generator
HTML, CSS and ffmpeg for a Looping Background Video
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 Background Generator works
A video background generator writes the markup, styles and script for a muted video that plays behind a section or the whole page, and the ffmpeg commands that make the files small enough to use. Set the path, fit and size, then copy the code and run the commands.
A background video has to meet browser rules before it will play on its own. Chrome, Safari and
Firefox only autoplay video that is muted, and iPhones need playsinline or the clip opens full
screen. The generated <video> tag sets both, adds loop, and uses preload="metadata" so the
browser does not download the whole file before the page is usable. aria-hidden keeps screen
readers from announcing a purely decorative element.
What the video background generator outputs
The CSS stretches the video over its container with object-fit, so it crops like a background
image instead of letterboxing. For a single section the video sits absolutely inside a positioned
wrapper; for the whole page it is position: fixed behind everything. The JavaScript pauses the
video when the tab is hidden, respects the reduced-motion setting, and wires up the pause button,
which WCAG requires for any motion that runs longer than five seconds.
Encoding with ffmpeg
Two sources give every browser a format it can play: VP9 WebM is usually smaller, and H.264 MP4
is the fallback for older Safari. -an drops the audio track, which is wasted bytes on a muted
video. -movflags +faststart moves the MP4 index to the front so playback starts before the file
finishes downloading. The last command saves the first frame as the poster, which shows while the
video loads and when motion is reduced.
FAQ
Why will my background video not autoplay?
Browsers block autoplay for any video with sound, so the tag must have muted, and iOS also needs
playsinline. Low power mode on iPhones and data saver settings on Android can still stop it,
which is why the poster image matters: it is what those visitors see instead.
How big should a background video file be?
Aim for under 2 to 3 MB. Keep the clip short, around 10 to 20 seconds, encode at 720p rather than 1080p, and choose the Small or Balanced quality. Slow, soft footage compresses far better than fast cuts or detailed textures such as leaves and water.
Is a background video bad for page speed?
It adds weight, but with preload="metadata", a compressed poster and a short clip the page can
still load quickly. The poster counts toward Largest Contentful Paint, so compress it well, and
avoid background video on pages where speed matters most, such as checkout.
What is the difference between this and the video hero builder?
The video hero builder makes a complete hero section with headline, buttons and overlay. This tool gives you only the background layer and the encoding commands, so you can drop the video behind any existing section or page layout you already have.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Video Hero Builder
Build a background video hero with overlay, headline, buttons and pause control.
Video Bitrate Calculator
File size from bitrate and duration, or the bitrate for a size limit.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Responsive Image Generator
Generate srcset, sizes and picture markup for responsive images.
Image Gallery Builder
Build a responsive CSS grid photo gallery with captions and hover effects.