How to get a video autoplay on mobile?

Design help General
1

Hi guys,

I tried to put a looping animation to showcase my work on my website, I used a background video component with a .webm file, so that I could successfully have it autoplay, and keep the file size minimum, (currently 1.6Mb, comparing to a Gif file 3.6Mb)
Now the problem is that, it doesn’t play on mobile. Does anyone here know a way to get around it?

The worst thing is, it doesn’t even display properly, as you can see from the screenshots.

IMG_9717
IMG_9717750×1334 287 KB

IMG_9718
IMG_9718750×1334 252 KB

I’ll be very happy if it could just display it properly as a static image on the mobile.
Thanks a lot!

Here is the link to the page I’m referring to:
http://aggie-test1-41ec35479f3f4d4b57095e384e0.webflow.io/mccormick

Here is my site Read-Only:
https://preview.webflow.com/preview/aggie-test1-41ec35479f3f4d4b57095e384e0?preview=a3b05261c914d05bd9504a8ee62bc89b

2

Try upvoting the wishlist discussions here:

Search for background video mobile.

Webflow does not attribute the video as “muted”, which is the requirement mobile browsers use to enable autoplaying background videos.

3

Actually, try this solution: Make Webflow's Background Video PLAY on iOS and Android - seems to work !

1 Like
4

yay! thank you Brad! It did work! But I still couldn’t figure out why it doesn’t resize to the height it’s given on the different breakpoints. Any ideas?

5

Hi Aggie,
Errr, sorry didn’t even realize there was a reply :frowning:

What seems to be the issue here with the height? I went to view your preview link of the mccormick case study and:
a) The desktop and mobile devices are sized correctly for a small phone
b) The video doesn’t auto play (Perhaps you have an updated link or haven’t republilshed the site since?

So just not sure what I’m supposed to be looking at :frowning:

6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.