Interactive Guide to Web Video
An actionable guide for using performant background and full-screen videos on your website. Select a target to get started.
1. Select Your Target
Desktop Recommendations
For standard landscape screens like laptops and monitors.
Aspect Ratio
16:9
Resolution
1280×720 (HD)
Key Considerations:
While 1920×1080 (Full HD) is an option, **1280×720 (HD)** offers the best balance between visual quality and a small file size for background videos. The difference in quality is often negligible, but the performance gain is significant.
Universal Best Practices
These rules are essential for any web video to ensure good performance and user experience, regardless of the target device. Applying them will prevent your site from slowing down.
💾
Keep File Size Small
Aim for **under 5-10 MB**. This is the single most important factor for page load speed.
⏳
Be Short & Looping
An ideal length is **10-20 seconds**. The video should loop seamlessly.
🔇
Remove Audio
Background videos won’t autoplay with sound. Removing the audio track shrinks the file size.
🎞️
Lower the Frame Rate
**24-30 frames per second (fps)** is plenty for smooth playback and reduces file size.
🖼️
Use a Poster Image
Display an optimized image of the first frame while the video loads for a seamless transition.
🛠️
Use Compression Tools
Tools like **HandBrake** are excellent for effectively reducing file size without losing too much quality.
Video Formats Explained
To ensure your video works everywhere, provide multiple formats. The browser will automatically pick the first one it supports. List WebM first for best performance.
MP4 (H.264 Codec)
The universal standard. Use it as a reliable fallback.
Pros: Works on virtually all browsers and devices.
Cons: Larger file size compared to WebM for the same quality.
WebM (VP9/AV1 Codec)
The modern choice for the web. Use it as your primary source.
Pros: Superior compression results in a smaller file size.
Cons: Not supported by some very old browsers.
<video autoplay loop muted playsinline poster="path/to/poster.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>