What could be causing the issue where the Webflow native background video element is not playing after publishing, despite autoplay working during preview?
TL;DR
- Ensure the video is muted to comply with browser autoplay policies and test across different browsers.
- Verify the video is an H.264-encoded .mp4 under 30 MB, and re-encode or compress if needed.
- Confirm the video is visible in the viewport, not hidden or blocked by custom code, and that changes were properly published and propagated.
If your Webflow background video is not playing after publishing, but works in preview, it's likely due to one or more publishing-time restrictions related to browser policies or video setup.
1. Browser Autoplay Policies
- Most modern browsers block autoplay unless the video is muted.
- The native Webflow Background Video element automatically mutes videos, but if you've used custom code or another video method, ensure the
mutedattribute is applied. - Safari and Chrome have different autoplay rules—test across browsers to isolate.
2. Unsupported Video Format
- Webflow only supports .mp4 files for background video.
- Acceptable encoding must be H.264 for video and AAC for audio (even if audio is muted).
- Re-encode the video using a tool like HandBrake to be sure it matches Webflow’s requirements.
3. Video File Size Limit
- Webflow's background video upload size limit is 30 MB.
- Larger files may appear in preview but fail to load on publish or display inconsistently due to caching or delivery issues.
- If your file is close to or exceeding the limit, compress it.
4. Publishing Delay or CDN Caching
- After publishing, Webflow assets may take a moment to propagate via the CDN.
- Clear your browser cache or try an incognito window to test.
- Make sure you have actually selected Publish to Selected Domains after any video change.
5. Custom Scripts or CSS Blocking Playback
- Check browser console for JavaScript errors that could be stopping the player.
- Ensure no custom JavaScript or CSS is interfering, hiding, or overriding the video element post-publish.
6. Element Not in Viewport or Visibility Settings
- Background videos only play when visible in the viewport. Ensure the section containing the video is not:
- Set to display: none
- Hidden behind other layers
- Placed outside the initial view unexpectedly
Summary
The video issue post-publish is usually due to autoplay restrictions, file format issues, size limits, or publishing delays. Re-check your video settings, encoding, and visibility to ensure compatibility across browsers.