Why are background videos not playing on the desktop version of my Webflow website, even though they work when toggling the preview?

Background videos in Webflow may not play on your live desktop site due to incorrect hosting, browser support issues, or file format problems, even if they work in preview mode.

​

1. Confirm Background Video Hosting and File Format

​

• Webflow only accepts .webm, .mp4, or .mov files up to 30MB for background videos.
• Even if your video plays in preview mode, it won’t work live if the file is too large or if the format is unsupported.
• Re-upload the background video and ensure it's under the size limit and encoded properly.

​

2. Check If You're Viewing the Published Site

​

• If you only press the Preview (eye icon) in Webflow Designer, it's running in the local Designer environment — not the actual hosted site.
• Videos can behave differently there. Make sure you're testing the live site at your Webflow subdomain or custom domain after selecting Publish.

​

3. Ensure Autoplay, Muted, and Loop Are Enabled

​

• Webflow’s background video component should automatically set these, but double-check that the video is muted, or modern browsers like Chrome will block autoplay.
• If you've custom-embedded your video, make sure it includes autoplay, muted, and loop attributes.

​

4. Check Browser Compatibility and Settings

​

• Some desktop browsers block autoplay videos due to user settings, especially when sound is enabled.
• Check in Chrome, Firefox, Safari, and make sure there are no autoplay restrictions turned on.
• Also check if extensions (like ad blockers or privacy filters) are preventing the video from loading.

​

5. Look for Console Errors

​

• Open your site in the browser, right-click the page, and choose Inspect > Console.
• Look for 404 (Not Found) errors or CORS policy issues that may block the video from loading if it's improperly hosted.

​

6. Re-upload or Replace the Video

​

• Occasionally, a video may get corrupted during upload or linked incorrectly.
• Delete the background video and upload it again, or use a fresh, optimized .mp4 file encoded with H.264 for maximum compatibility.

​

Summary

​

If background videos aren’t playing on desktop in the live Webflow site, verify the file format and size, publish the latest changes, confirm that autoplay and mute are active, and check for browser restrictions or errors in the console. Preview mode may mislead, so always test changes on the published version.