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 background video is muted, under 30MB in .mp4 format, placed in a visible section on page load, and uploaded using Webflow’s native video element.
- Avoid custom code conflicts, confirm HTTPS hosting, and steer clear of external embeds that may trigger autoplay or cross-origin issues.
Webflow's background video element may not play after publishing due to browser autoplay policies, file issues, or incorrect implementation—even if it works in preview mode.
1. Check Browser Autoplay Policies
- Most modern browsers like Chrome and Safari block autoplay of videos with sound unless the user has interacted with the page.
- Webflow's background video is designed to be muted and autoplayed, but if the muted attribute is missing due to a custom embed or script, it won’t autoplay.
- Ensure the video is muted. Webflow's native background video element automatically sets this, but confirm you haven't overridden it.
2. Verify Video Format and Size
- Webflow requires .mp4 format, and the file must be under 30MB.
- Large or corrupted files might load in preview but fail live due to server handling restrictions.
- Re-encode the video using tools like Handbrake to ensure compatibility and compression.
3. File Hosting Issues
- If you're using a custom embed or external host (e.g., Vimeo or third-party URL), autoplay may be blocked due to cross-domain policies or CORS restrictions.
- Stick with the native Webflow background video uploader rather than using custom HTML embeds.
4. Lazy Loading or Visibility
- Autoplay only triggers if the video is in the viewport at page load time.
- Ensure the section containing the background video is visible on page load and not hidden with interactions.
- If you're using lazy loading or conditional visibility, that could prevent the video from playing automatically.
5. Custom Code Conflicts
- Certain custom scripts or conflicting JavaScript might affect autoplay behavior after publishing.
- Test by removing custom code temporarily from your page to see if the video plays.
6. HTTPS and Cross-Origin Issues
- Background videos might not autoplay if your site is served over HTTP instead of HTTPS—most modern browsers block mixed content.
- Always publish/host sites over HTTPS.
Summary
Webflow preview may autoplay background videos due to relaxed development settings, but on publish, playback can fail due to browser autoplay restrictions, large file sizes, visibility issues, or incorrect usage. Ensure the video is muted, under 30MB, placed in a visible section, and embedded using Webflow’s native video element to ensure proper live autoplay.