Embedding video on a website involves different considerations than uploading to a platform. There’s no YouTube or Vimeo encoder to clean up your file — whatever you serve is what plays. That means the format, codec, file size, and delivery method all directly affect load time, autoplay behaviour, and the viewing experience for your visitors. This guide covers the practical decisions for 2026.
The Short Answer: MP4 H.264 for Maximum Compatibility
If you only want one format that works everywhere, MP4 with H.264 video and AAC audio is still the universal choice. It plays natively in every browser, every device, and every operating system without plugins or fallbacks. When in doubt, use MP4.
Should You Also Offer WebM?
WebM (VP9 or AV1 codec) typically produces 30–50% smaller files than H.264 MP4 at equivalent quality, which means faster loading for visitors. All modern browsers support WebM. For high-traffic sites where bandwidth matters, serving WebM to supporting browsers with MP4 as fallback is the optimal approach — using the HTML5 <video> element’s <source> tags:
- <video autoplay muted loop playsinline>
- <source src="video.webm" type="video/webm">
- <source src="video.mp4" type="video/mp4">
- </video>
The browser picks the first format it supports. Modern browsers take WebM; older ones fall back to MP4.
File Size Targets for Web Video
| Use Case | Target File Size | Resolution |
|---|---|---|
| Hero / background video | 1–5 MB | 1080p or 720p, muted loop |
| Product demo embed | 5–20 MB | 1080p, with audio |
| Tutorial / explainer | 10–50 MB | 1080p, with audio and captions |
| Long-form content (10+ min) | Use YouTube/Vimeo embed instead | — |
Autoplay Rules You Need to Know
Modern browsers enforce strict autoplay policies. A video will autoplay only if:
- It is muted (the
mutedattribute is set), OR - The user has previously interacted with your site, OR
- The browser’s media engagement score for your domain is high enough
For hero/background video that autoplays: always use muted autoplay loop playsinline. For videos with audio that you want to autoplay: you can’t rely on it in most browsers — design for a user-initiated play instead.
Preparing Web Video with Free Browser Tools
- Convert to MP4 — use the Format Converter if your source is MOV, AVI, or MKV
- Compress for web file size targets — use the Video Compressor to hit the targets in the table above
- Trim to only what’s needed — use the Video Trimmer; every second removed is bytes saved
- Add captions for accessibility — use the Add Subtitles tool; web video should be accessible to all visitors
playsinline attribute for mobile
Without playsinline, iOS Safari opens videos in full-screen mode instead of playing inline on the page. For any embedded web video, always include playsinline in your video tag.