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?
TL;DR
- Webflow limits background videos to 30MB and only supports MP4; this cannot be increased.
- Use tools like HandBrake to compress videos by adjusting resolution (1080p/720p), bitrate (2,000–3,000 kbps), and clip length (under 15 seconds).
- If compression isn't sufficient, embed externally-hosted videos or use alternatives like GIFs or Lottie animations.
Webflow limits background video files to 30MB, and this limit cannot be increased. However, you can optimize your MP4 file to meet the requirement without sacrificing too much quality.
1. Webflow Background Video File Limit
- Maximum upload size is 30MB per background video.
- This is a hard limit across all plans, and cannot be increased, even on paid plans.
- The file must be in MP4 format.
2. Best Practices to Compress MP4 for Webflow
To reduce your file size while maintaining quality, use the following recommendations:
- Use HandBrake (free video compression tool):
- Choose the “Fast 1080p30” preset as a baseline.
- Set Constant Quality to RF 23–26.
- Use H.264 codec (Webflow does not support H.265/HEVC).
- Limit resolution to 1080p or 720p depending on visual needs.
- Online compressors (if you don’t want to install software):
- Use trusted tools like Clideo, VEED.IO, or Adobe Express.
- Choose options that allow you to adjust output resolution and bitrate.
- Lower bitrate manually:
- Reduce to a target bitrate of around 2,000–3,000 kbps for 1080p.
- Keep audio quality minimal or remove audio completely (Webflow mutes background videos anyway).
- Shorten the video loop:
- Try to keep the clip length under 15 seconds.
- Looping a shorter video greatly reduces the file size.
3. Alternative Options
If your background video exceeds 30MB and compression degrades it too much:
- Host the video externally (e.g., YouTube or Vimeo) and embed it using a custom video embed (not as a background).
- Convert video to GIF, though this is often heavier and lower quality for backgrounds.
- Use Lottie animations for decorative motion graphics, which are vector-based and lightweight.
Summary
Webflow’s 30MB limit for background videos is fixed, but you can compress MP4 files using tools like HandBrake by adjusting resolution, bitrate, and clip length. If compression alone isn’t enough, consider external video embedding or alternative animation formats.