Video autoplay (HTML/CSS) not always working on phone, but sometimes it is

Question

I'm trying to create a simple website and want to just have some videos autoplay. Now I'm aware there are some changes that make this a little bit harder than it used to be.

Right now I'm dealing with the problem that sometimes it works, sometimes it doesn't. A refresh of the page can make the difference. I've got no clue why that could be, so hopefully you guys can help me.

Desktop works fine. Mobile it works sometimes (page refresh helps often) - I'd like this to be always.

The two URLs:

• https://jetweevers.nl/stevieisjarig/2-ja.html
• https://jetweevers.nl/stevieisjarig/bye.html

The code used for the video:

<video class="bg-video" src="video/bye.mp4"
   autoplay="autoplay" loop="true" muted defaultmuted playsinline poster="images/bg-2.jpg"> </video>

Hope you guys can point me in the right direction!

Many thanks.

Answer 1

Auto-play is restricted for many devices in low-power mode. It's possible this is what you're running into, although a page refresh shouldn't make a difference.

There are many posts about this on SO, but here's one with some solutions that worked for people.