Background Videos in Webflow: Size Limits That Keep Bandwidth Down

Why it matters

Webflow says assets such as images and videos typically consume the most bandwidth. Heavy assets served to many visitors raise consumption quickly.

Autoplay makes it worse. web.dev says autoplay videos begin downloading immediately, even if they sit outside the initial viewport.

Video can affect speed too. web.dev says that once painted, the first video frame can count as an LCP candidate.

Webflow also warns that background videos may not autoplay on touch devices when a visitor has data saver or low power mode on.

How to check it

1. Open Site usage. Go to Site settings, then Site usage. In the asset donut chart, look at the Videos share.
2. Open the assets table. Use By top assets. Check whether a video leads the list. Check the Biggest movers filter after you add a new video.
3. List your background videos. Find every Background video component. Count how many load on each page.
4. Check the source files. Note the size and length of each video on your computer.
5. Check file names. Webflow says names should contain no spaces or special characters except dashes.
6. Check LCP. In PageSpeed Insights, see whether the video is the LCP element.
7. Check the play/pause button. If a video loops or autoplays, Webflow says to keep the button on, to meet WCAG 2.2.2.

How to fix it in Webflow

1. Set a budget. Pick a size limit below 30MB for each clip. Base it on your Site usage trend and your plan's bandwidth. No source gives a standard number.
2. Keep clips short. A short loop is smaller than a long one.
3. Compress before upload. Webflow says to compress videos before uploading. web.dev says FFmpeg's default command, such as ffmpeg -i input.mov output.webm, already gives a smaller file. The -crf option adjusts compression.
4. Strip the audio. Background videos are silent in Webflow. web.dev says to remove the audio track with -an, which shrinks the file even when the audio is silent.
5. Upload the Background video component. Use Quick find (Cmd or Ctrl + E), or the Add panel's Components section. Accepted formats are webm, mp4, mov and ogg. Webflow transcodes uploads to mp4 and webm for browser support.
6. Use fewer videos. Keep one background video per page where you can.
7. Do not place one below the fold. Because autoplay downloads at once, a video far down the page still costs bandwidth.
8. Keep the controls. Leave the play/pause button on. Add an overlay if the video needs contrast.
9. Move big or long video elsewhere. Webflow suggests YouTube, Vimeo or Cloudflare Stream, or the Marketplace apps Flowdrive and Vidzflow. The Video element embeds third-party video, and uploaded files are not supported in it. web.dev notes that third-party embeds can be heavy. It suggests a facade that loads the real embed only on interaction.
10. Replace big GIFs. web.dev recommends video for animated content, using autoplay, loop, muted and playsinline.
11. Check again. After a few days, return to Site usage. Compare the Trend tile and the Videos share.

Checklist

• You have your own size budget below 30MB.
• Each clip is short.
• Videos were compressed before upload.
• Audio tracks were stripped.
• File names use only dashes as special characters.
• There is one background video per page where possible.
• No background video sits far below the fold.
• The play/pause button is on.
• Large video is hosted elsewhere.
• Site usage was checked after the change.

FAQ

What is the maximum file size for a Webflow background video?

30MB. Webflow also accepts only webm, mp4, mov and ogg files for this component.

Can I add sound to a background video?

No. Webflow says background videos are silent. Stripping the audio track before upload makes the file smaller.

Will a background video always autoplay on mobile?

No. Webflow says it may not autoplay on touch devices when data saver or low power mode is on. Visitors with reduced motion enabled see it paused.

Dealing with this on a live Webflow site? It is the kind of work I do in Bandwidth. Send me your site and I will tell you what I would fix first.