I’m having an issue where my background videos behave completely differently depending on the system used.
Preview mode
When I’m inside the Webflow Designer and hit “Preview,” The background videos play perfectly.
No problems, smooth loop, everything works as expected.
Published site on Mac
When I publish the website and open it on my MacBook, The background videos also play normally.
They autoplay, loop, and behave exactly like in Preview.
No sound tracks are present (videos are muted).
Published site on Windows computer
Here’s where the issue appears:
When I open the published site on a Windows computer (tested in Chrome and Edge), All the background videos appear paused.
They never start playing.
My background videos has animations connected to it (page load or hover)
I’m using a mix of Webflow’s native Interactions and GSAP.
All videos are muted and looping, with no audio tracks.
The videos are standard MP4 files uploaded directly through Webflow.
Would really appreciate clarification or a recommended workaround
Windows Chrome/Edge enforce autoplay rules pretty aggressively.
Did you try the video without being linked to interactions by chance? i.e does it work in Windows/Chrome just as a regular bg video?
If you’re able to share a read only link or the published url that would be useful, I’d like to inspect the elements too see what’s going on, and we can always see if it’s fixed with our FOUC fix, which prevents elements showing before GSAP has fully loaded.
I actually figured out what was going on - it turned out that the videos worked perfectly fine on other Windows computers. So the issue was isolated to my own setup.
After some digging, I came across a 2022 article mentioning that background videos in Windows may not play if the “Show animations in Windows” option is turned off in the system settings. And that was exactly the case on my computer.
After re-enabling that setting, the background videos started working again without any issues.
That said, I find this a bit concerning. I have no idea why that setting was disabled on my system - but if it happened to me, it could easily affect others as well. It’s unfortunate that this Windows setting can completely stop videos from playing on a website.
If anyone knows why this restriction exists, or if there’s a reliable workaround to ensure background videos always play regardless of that setting, I’d really appreciate any insights. It’s definitely something worth understanding better.
This setting is something that most operating syetems have (including MacOS and also mobile phones). For example if you set your iPhone to a lower power mode, Safari will turn off all autoplay videos. This behavior is intended as it should save energy by not playing videos. You will also find similar behaviors for settings like “reduced motion“.
I’m not sure if there’s a workaround for this, but since this is an intended behavior, users will probably be used to it since they will see paused videos on many other websites aswell.
Yep, what @Schuschi_Eyes said. If the users turns that setting off, then videos should not play. If there is a workaround, I can only hope that most devs care enough to not use it.
There are also still millions of people who have very restrictive data plans, so landing on a page with video playing automatically will just chew through their data. If the settings are off, it’s usually intentional, and always worth setting up animations to not play too if those settings are toggled, and you can do that in GSAP in Webflow now!
The background videos play perfectly.
