I’m using a background video container that is meant to loop seamlessly, but once the video finishes one loop, there’s a black background for a few seconds (as if the video is buffering?) before it loops again.
Using default background video element from Webflow
Autoplay and looping are checked
Videos are mp4, and under ~5MB
There are multiple videos in the project
Only 3 of the videos are doing this (see screenshots)
All videos are 10 seconds and edited to loop (see all the other videos on the page)
I’m wondering if this could be because of the container size? or maybe its at its limit, so it’s slower — though I would have thought the videos that are in bigger containers would be the ones giving me a harder time.
A good question, I don’t use Webflow for bg video often however it could be that there is a minimum loop length of 30 seconds. I can’t guess why that might be.
My first suspicion would be a glitch in the encoding process math, but glancing at your source video I don’t see anything obvious such as an unusual framerate that might trip it up.
You could host the videos elsewhere, I typically use Cloudflare R2, but an Amazon S3 bucket, or bunny.net would work also, with zero recompression or modification of your videos. Vimeo pro is also popular among some designers for Webflow bg videos.
In case anyone comes across this solution: I fixed this issue by re-exporting my videos to the proper 1920x1080 size. The three videos that were going black were cropped and exported at the size of their containers (different sizes + ratios), and I think Webflow compressed them and added 20 seconds of black after I added it to the Background Video element.
Still, that one archway video (top left in the screenshots) is a portrait size (1080x826), so I’m not really sure what Webflow’s criteria is here.
I also wonder if it might be that I just published too soon after I replaced the video.
Anyway, hope that helps. Feel free to reach out if you need help troubleshooting!
