October 15, 2026 · 5 min read
How to use a video hero without slowing down your website
Practical guide to fast background videos: MP4/WebM compression, poster images, lazy loading and avoiding heavy iframes.
Why video heroes often hurt performance
A full-screen video is often the heaviest file on the page. Embedded players (YouTube, Vimeo iframes) add even more scripts before anything plays.
That delays Largest Contentful Paint and can cost you rankings and visitors on mobile.
Use a native video tag with a poster
Serve a short, muted, looping clip with the native <video> element instead of an iframe. Add a lightweight poster image so something meaningful shows instantly.
Provide WebM (VP9/AV1) and MP4 (H.264) sources - browsers pick the one they support.
Compress and lazy-load
Keep hero clips around 1–3 MB: 720p–1080p, 6–12 seconds, no audio track.
For videos further down the page, use preload="none" and only attach sources when the video approaches the viewport.