Website background video (HTML5)
Enter the video address (MP4 or WebM) and the poster image. The code already comes with the attributes browsers require to play on their own.
How to useVideo playing in the header background
Available in: 
Website background video (HTML5): what it is for
A short video playing in the background at the top of your site shows the place, the product or the service right away. To work on mobile, the video must have no sound and have the muted, autoplay and playsinline attributes.
The generator builds the section with the video tag in MP4 and WebM, a poster image, an adjustable dark overlay so the text stays readable, a title and text, and a pause button, as WCAG requires for content that moves for more than 5 seconds. For people who asked for less motion, the video starts paused.
How to use
- Enter the addresses of the video and the poster image.
- Write the title and text and adjust the dark overlay.
- Copy the code and paste it at the top of the page.
When to use it
- Header of a restaurant or hotel site.
- Event landing page.
- Real estate or gym page.
Frequently asked questions
Why doesn't the video autoplay on mobile?
Browsers only let videos without sound play on their own. The video needs the muted, autoplay and, on iPhone, playsinline attributes, otherwise it opens in full screen or does not play. The code already includes all three.
What file size should I use?
A background video should be short (10 to 20 seconds in a loop) and light, preferably under 3 to 5 MB, at 720p or 1080p with no audio. Compress it before publishing; a heavy video slows down loading on mobile.
What about people who prefer less motion?
For people who turned on reduced motion in their system, the script pauses the video and only the poster image remains. There is also a pause button, which WCAG requires for content that moves for more than 5 seconds.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 are free.