Why are background videos not playing on the desktop version of my Webflow website, even though they work when toggling the preview?
TL;DR
- Use a muted, under-30MB MP4 file and ensure it's properly encoded without audio.
- Republish the site, clear browser cache, and check for hidden elements, custom code, or improper z-index stacking that might block the video.
If your Webflow background videos play in Preview mode but not on the live desktop site, it’s likely due to browser autoplay policies or publishing/export issues.
1. Check Video File Format and Size
- Webflow accepts MP4 files up to 30MB for background videos.
- Ensure the file is .mp4, compressed efficiently, and within size limits.
- Large or incompatible files may work in Preview but fail on the live site due to load timing or browser restrictions.
2. Autoplay Policy Restrictions
- Most browsers block autoplay of videos with audio. Background videos in Webflow must be muted to autoplay.
- Webflow automatically mutes background videos, but re-check your source video:
- Make sure it has no embedded audio track, even if silent.
- If you exported your MP4 manually, remove audio using a tool like HandBrake or Adobe Media Encoder.
3. Check for Overlapping Elements or Z-Index Issues
- Ensure no other elements are layered above the background video section unintentionally.
- Inspect z-index stacking in the Navigator and Style panels.
- A hidden or transparent object could block the video’s ability to display/play.
4. Republish Your Webflow Site
- After making changes, click “Publish” to ensure they appear on the live site.
- Webflow’s Preview mode shows local updates, but these won’t reflect online until republished.
5. Clear Browser Cache or Try Another Browser
- Cached assets may prevent updated videos from appearing.
- Clear your browser cache or test in Incognito Mode or another browser to rule out local caching problems.
6. Check Host and Embed Settings (if exported)
- If you exported your Webflow site and host it elsewhere:
- Verify that all files are correctly uploaded.
- Make sure the background video’s path is correct and accessible.
- Self-hosted sites may have issues if the video file wasn’t uploaded properly or permissions block autoplay.
7. Ensure Video is Not Hidden via Interactions or Breakpoints
- Check that the background video element is visible on desktop:
- Review Style visibility settings.
- Confirm that no interactions/triggers hide or replace the video on page load.
8. Review Custom Code
- Custom JavaScript or CSS could override native video behavior.
- Temporarily remove custom code and republish to rule this out.
Summary
If Webflow background videos work in Preview but not live on desktop, ensure you're using a muted, under-30MB MP4; republish the site; clear cache; and rule out hidden interactions or custom code conflicts. Most often, it’s due to autoplay being blocked by audio or file issues.