Webflow sync, pageviews & more.
NEW

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 background videos must be under 30 MB; compress using HandBrake with H.264 codec, 720p resolution, 20–23 RF quality, and no audio.
  • Keep videos short (under 20 seconds) and loopable to stay efficient and within upload limits.

Webflow has a strict file size limit for background videos, and while this cannot be increased, you can optimize your MP4 file for best results.

1. Webflow's Background Video Limit

  • Webflow's background video upload limit is 30 MB.
  • This limit cannot be increased—it’s hardcoded into Webflow’s hosting and asset handling.
  • If your file is over 30 MB, it must be compressed or externally hosted (e.g., YouTube or Vimeo, though those cannot be used as actual background videos).

2. Best Practices for Compressing MP4

  • Use HandBrake (Free Tool):

  • Choose the "Fast 1080p30" preset as a starting point.

  • Under the Video tab, set:

    • Video Codec to H.264 (x264).
    • Constant Quality to around 20–23 RF (higher number = more compression).
    • Framerate should match the source or be set to constant at 24–30 fps.
  • Under the Audio tab, lower bitrate to 96–128 kbps or remove audio entirely, since background videos are muted by default.

  • Shorten Video Duration:

  • Keep background videos under 15–20 seconds.

  • Looping a short video seamlessly is most efficient.

  • Reduce Dimensions:

  • Resize to a maximum of 1280x720 (720p) unless higher resolution is essential.

  • Lower resolutions drastically reduce file size and still look good as backgrounds.

3. Alternative Hosting Workaround (Not Native Solution)

  • While background videos must be uploaded in Webflow, you can:
  • Host larger videos externally (like AWS, Vimeo, or Cloudflare Stream).
  • Then embed them using custom code, but this is only feasible for traditional video embeds, not true background video elements.

Summary

You cannot increase Webflow's 30 MB limit for background videos, but you can stay under the cap by compressing your MP4 using tools like HandBrake, reducing video resolution, shortening duration, and stripping audio. Aim for a lightweight 720p MP4 with efficient settings to stay well below the size threshold.

Rate this answer

Other Webflow Questions