Background video not playing on recently published sites

Community resources General
1

Hey everyone! For some reason background videos in my webflow projects don’t play and I just get a still image (first frame) instead. I noticed this issue a few days ago. Given that I haven’t made any changes to my projects, I’m wondering if this is a new bug in webflow. I’ve included a basic project here with a short mp4 as its background video that doesn’t play and would appreciate any insight.

read-only link: https://preview.webflow.com/preview/bgvid-7100ba?utm_medium=preview_link&utm_source=designer&utm_content=bgvid-7100ba&preview=8cac86c14007227c4d4b3145d6c0ca56&workflow=preview

2

Same. Also videos linked from outside don’t work anymore.

3

We noticed this is only the case on websites that have been republished recently; they might have made some adjustments to the code that mess up videos since a few days.

4

Exactly! Strangely enough everything seems to be fine on mobile

1 Like
5

Please tell me if you managed to find a solution to this problem?

6

It seems I’ve run into the same issue with my background video…
Works on mobile, but not on my desktop/laptop; which is quite strange.

Edit:
A possible solution straight from the Webflow support:

“A recent issue popped up with background videos not playing when reduced motion preferences are enabled on some computers. It’s possible that reduced motion/animation preferences are preventing the videos from playing in these cases.”

In Windows: Settings > Ease of Access > Display > Show animations in Windows.
On Mac:Apple menu > System Preferences, click Accessibility, then click Display.

Changing these settings on my desktop (Windows 10) fixed it for me. My best guess is that a recent update changed these settings.

3 Likes
7

I got the same reply from the Webflow support, suggesting to disable reduced motion preferences. Although it resolved the issue on my computer, it’s obviously not a solution since asking clients and their site visitors to make this change just isn’t reasonable and Webflow support should know that it’s a pointless fix!

1 Like
8

Same here happened to me. I switched my settings back and the video starts playing again.

Real bummer though.

Im wondering if a recent windows update switched my settings around and if so, did it do that to everyone elses computer who got the same update?

If so than having a background video automatically play on your website would be pointless if everyone’s settings turns it off.

That would be a sizable group of people.

9

Looks like the issue is now fixed everyone!

10

This is still not fixed.

1 Like
11

I’m having this issue as well, the video freezes after a second or so of playing. Does the same in incognito mode as well.

12

I am currently facing this same issue. The background video plays on mobile but doesn’t on desktop. Why can’t there be a permanent fix for this?

13

@Keneazotani - Webflow can’t “fix” your operating system preferences. However you can.

14

I don’t understand why it works here without turning it on Animate controls and elements inside windows https://minim-hero-bgvideo.webflow.io/

and it doesn’t work on my website

15

I’m unsure why Webflow background videos don’t work either when there are a number of examples of them working and I’ve also seen many more examples on other sites. I cloned the site above and tested to see if this worked in one of my sites and had issues with it playing.

I’ve spent a little while trying different combinations and came across some of these solutions. Embedded video not playing/showing on mobile devices - #12 by JackHeathcote
Video Background not playing - #6 by choreus (I’m not experienced with coding so found this hard to implement)

I also saw this Webflow example - https://theroyal.webflow.io
With the cloned Mimim Hero site (from above) I added a HTML Embed, which seemed to work - Webflow - BG Vid Test

This was my rough attempt to get the video to work with a HTML Embed and as you can see I couldn’t quite work out how to get the video to go quite fullscreen when the browser is resized. Not sure what was missing from the HTML code to make it fullscreen (or if any of the other options are better for fullscreen BG videos) but any help would be greatly appreciated.
If anyone has a simpler solution please let me know. TY!

16

Video autoplay still not working! I bought this template. https://filmax.webflow.io/
It works in the sample, but when I published it (here: https://olmerad.webflow.io), the videos don’t autoplay on desktop (only work on mobile?!). Webflow team, this is a major fail!

17

Same problem here. Seems to work on an other site but not on my latest website… Pretty Strange.

Does anyone know if “reduce motion” is always on or off by default on mac or windows?

1 Like
18

Wondering if anyone has determined an effective counter to this issue which continues to plague many sites. As others have indicated, developers can alter their PC settings to view vids, but this is a non-starter for visitors to sites. it would be helpful for Webflow admins to step up and provide clear direction, or be straight up and let us know autoplay is now a no-go.

19

This script will allow you to embed a background video, it will check to see if the OS has animation disabled and if it does will disable the video and either display the image that you have linked to the embed div or whatever image is behind the embed

<div id="videoDiv" style="width: 100%; height: 100%; background: transparent;" class="w-background-video w-background-video-atom">
    <video id="backgroundVideo" playsinline loop muted autoplay="" loop="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
        <source src="VIDEO LINK" data-wf-ignore="true"/>
    </video>
</div>

<script>
    var videoDiv = document.getElementById('videoDiv');
    var video = document.getElementById('backgroundVideo');
    var motionQuery = window.matchMedia('(prefers-reduced-motion)');

    function handleReduceMotionChanged() {
        if (motionQuery.matches) {
            // If user prefers reduced motion, remove the video
            video.remove();
            // Set the background to transparent
            videoDiv.style.background = 'transparent';
        } else {
            // Otherwise, play the video
            videoDiv.appendChild(video);
        }
    }

    // Listen for a change in the prefers-reduced-motion media query
    motionQuery.addListener(handleReduceMotionChanged);

    // Call the function initially to set the correct video state when the page loads
    handleReduceMotionChanged();
</script>

hope that helps.

20

This solved the issue for me…it wasn’t checked…checked it and this resolved the issue after hours of checking through the code - thanks!