How to add a background video to your website: looped, muted and fast
Updated: November 5, 2026
A video that plays on its own in your hero or a section grabs attention, but done wrong it turns your site into a slow page that eats your visitors’ mobile data. The key is telling a decorative background apart from a video people will actually watch. Here’s how to do each.
The browser rules
- A video can only start on its own if it’s muted: Chrome, Safari and Firefox block autoplay with sound.
- On iPhone you need the playsinline attribute so it doesn’t open fullscreen.
- If the user has data saver or battery saver on, the browser may not autoplay it: always add a fallback image (poster).
Option 1: decorative background (short clip on your own site)
For a purely decorative background of a few seconds with no controls, the lightest option is a small file served from your site. Compress it hard: a 5–10 second clip should weigh under 2–3 MB.
<video autoplay muted loop playsinline preload="metadata" poster="background.jpg" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">
<source src="background.webm" type="video/webm">
<source src="background.mp4" type="video/mp4">
</video>Option 2: featured video that plays on its own (with Dembed)
If it’s a video people will watch (a presentation, a trailer or a demo), host it on Dembed and embed it with the iframe. It won’t weigh on your hosting, quality adapts to the connection and visitors can turn on the sound or go fullscreen.
Add ?autoplay=1 to the end of the embed address so it starts on its own, muted. Under Dashboard → Player you can turn on loop and hide the title for a cleaner look.
<iframe src="https://dembed.cc/embed/v_YOUR_ID?autoplay=1" title="Presentation" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>Tips so it doesn’t slow your site
- Don’t use a heavy video as your hero background on mobile: show the image and only play the video on large screens.
- Use loading="lazy" on iframes below the first screen.
- Reserve the space with aspect-ratio so the page doesn’t jump while loading (better Core Web Vitals).
- Offer a way to pause it: it’s better for accessibility and for people with reduced motion turned on.
Frequently asked questions
Almost always because it isn’t muted. Add muted (and playsinline for iPhone). With sound, browsers block autoplay.