Can the file size limit for background videos be increased in Webflow, or does anyone have suggestions on the best format to compress an MP4?
- Webflow background videos must be MP4 and under 30 MB; this limit can't be increased.
- Use tools like HandBrake or Adobe Media Encoder to compress using H.264, resize to 720p, reduce frame rate, and trim length for optimal quality and size.
Webflow's background video file size is limited to 30 MB, and this cannot be increased. To meet the limit, you can compress your MP4 using efficient formats and tools without sacrificing significant quality.
1. Webflow’s Background Video Limit
- Maximum file size: 30 MB for any background video element.
- Accepted formats: Only .mp4 files are allowed.
- There is no way to increase this limit, even on paid plans.
2. Best Practices for Compressing MP4
- Use H.264 codec, which balances good quality and small file size. Most export tools use this codec by default.
- Resize the video to a maximum resolution of 720p (1280×720). Background videos don’t need to be full HD.
- Lower frame rate to 24 or 30 fps. Higher frame rates increase file size unnecessarily for backgrounds.
- Limit video length—short looped videos (e.g., 10–20 seconds) perform better and compress more efficiently.
3. Recommended Compression Tools
HandBrake (Free)
Choose “Fast 720p30” preset
Set video codec to H.264 (x264)
Adjust “Constant Quality” to around RF 23–26 for good quality/compression
Adobe Media Encoder
Format: H.264
Preset: Match Source - Medium Bitrate
Output resolution: Downscale to 1280×720 or smaller
Clideo or VEED.io (Online Tools)
Useful for quick compression without installing software
May reduce quality more aggressively, so adjust settings manually if needed
4. Tips to Stay Below 30 MB
- Loop short animations and ambient clips to create seamless playback at smaller sizes.
- Avoid audio in background videos—Webflow ignores it anyway, and it increases the file size.
- Crop excess video time by trimming using tools like QuickTime or HandBrake.
Summary
You cannot increase Webflow’s 30 MB background video limit, but you can optimize your MP4 file using tools like HandBrake, choosing the H.264 codec, reducing resolution to 720p, lowering frame rate, and trimming length to stay under the limit with good quality.