A video that plays poorly on a website — buffering constantly, taking 10 seconds to start, or looking terrible — is worse than no video at all. Getting it right is about choosing the correct format, compressing to a reasonable size, and deciding whether to self-host or embed from a platform.
Start With the Right Format and Codec
MP4 with H.264 video and AAC audio is the standard for web. It plays in every modern browser — Chrome, Safari, Firefox, Edge — on desktop and mobile, without any plugin. H.265 offers better compression but has patchy browser support and is not worth the compatibility risk for most public websites.
Compression for Web Use
A video on a website needs to balance:
- Load speed — visitors should see movement quickly, especially on mobile.
- Quality — it should look good at the size displayed.
- File size — large files cost more to serve and take longer to start.
For an embedded or background video at 1080p, a bitrate of 3,000–5,000 kbps is a reasonable web target. At 720p, 1,500–3,000 kbps is usually enough. Use Video Compressor to reach these targets. See what is video bitrate and how does it affect quality for the detail behind these numbers.
Self-Hosting vs Platform Embedding
| Self-hosting | YouTube / Vimeo embedding | |
|---|---|---|
| Loading speed | Depends on your hosting | Platform CDN, usually fast |
| Bandwidth cost | You pay per GB served | Platform pays |
| Control over player | Full | Limited by platform player |
| Privacy | No third-party tracking | Platform collects analytics |
| Best for | Short background videos | Longer content, tutorials |
For most content videos — tutorials, product demos, testimonials — embedding from YouTube (set to unlisted if it's not meant for public search) or Vimeo is the practical choice. Self-hosting works best for short, muted background loops on landing pages.
Preparing a Self-Hosted Video
- Convert to MP4 H.264 if not already (MOV to MP4 or similar).
- Compress with Video Compressor.
- Resize to the dimensions actually displayed — a video in a 600px wide container doesn't need 1920px source width.
- Provide a thumbnail/poster frame so visitors see something before the video loads.
Mobile Considerations
Add playsinline to the video element so it doesn't open fullscreen automatically on iOS. If the video autoplays, it must be muted — browsers block autoplay with sound by default on mobile. For background loops, autoplay muted loop playsinline is the standard combination.
Hero Background Videos
For a muted, looping background video on a landing page:
- Keep it under 5–8 MB — background videos that take 5+ seconds to buffer are worse than no video.
- Use Video Compressor to reach a target around 1920×1080 at a low bitrate (500–1,000 kbps is often enough for background use).
- Provide a poster image so visitors see something while the video buffers.
- Consider disabling the video on mobile in CSS to save mobile bandwidth — a static image often works better on smaller screens.
For more on controlling the file size specifically, see what is video bitrate and how does it affect quality. For image optimisation on the same page, see how to fix images slowing down your website.
