Is there a bug in Webflow causing background videos to only display the first frame as a still image, even though no changes have been made to the projects?
TL;DR
- Check for Webflow or AWS outages, verify MP4 format with H.264 encoding and no audio, and re-upload the video in Webflow.
- Test in a clean project and across browsers, inspect for conflicting custom code, and clear browser/Webflow cache before republishing.
Webflow background videos may currently display only the first frame if there's an issue with video playback — this may be due to a known Webflow bug or external hosting source (like AWS).
1. Check for Recent Webflow Bugs or Outages
- Webflow has had intermittent issues with background videos in the past due to updates or AWS hosting problems.
- Visit status.webflow.com to check for any platform-wide reported bugs.
- Webflow's background videos are hosted on Amazon Web Services (AWS) — if AWS has a temporary CDN issue, videos might load improperly.
2. Verify Video Format and Encoding
- Background videos must be MP4 format, below 30MB, and encoded with settings compatible with browser autoplay.
- Check your video through a tool like HandBrake and make sure:
- It’s encoded using H.264 codec.
- The “Web optimized” setting is enabled.
- Audio is removed (if possible), as some browsers block autoplay on videos with audio.
3. Re-upload the Video to Webflow
- Even if no changes were made, corrupted file references can happen.
- In the Webflow Designer, delete the current background video and upload it again using the same or reconverted MP4.
- After re-uploading, publish the site again to clear cache-related problems.
4. Test in a Clean Project or Across Browsers
- Create a new blank Webflow project and try uploading the same video there. If it plays properly, the issue is with the original project or styling.
- Test the published site in multiple browsers (Chrome, Firefox, Safari) to isolate browser-specific playback issues.
5. Check Custom Code or CSS Conflicts
- If you’ve added custom CSS or JavaScript, confirm it doesn’t unintentionally target or hide the
<video>element. - Common issues include CSS rules like display: none, z-index conflicts, or opacity: 0 triggering on load.
6. Clear Browser and Webflow Publish Cache
- Sometimes, stale assets get cached locally or on the Webflow CDN.
- Clear your browser cache and use Publish > Publish to Selected Domains even if it’s already published.
Summary
Webflow background videos displaying only the first frame can stem from platform bugs, cached files, incorrect encoding, or custom code conflicts. Re-uploading the video, checking status updates, and testing in new projects usually resolves it. If the issue persists, contact Webflow Support with your project link.
