Google's Autoplay Policy is affecting current sites that have Video Background for Chrome Browser

Design help General
1

Hi, I have recently stumbled upon a problem, after client reported that BG video is not working. So I did my best to check, struggled for a while till i noticed googles Video Autoplay policy taking effect in April 2018.

So the problem.

  • BG video not autoplaying ( even if video doesn’t have sound ). Not sure if the HTML5 tag
    <Video muted > helps. // Will try later
  • Safari / Firefox / Edge works as intended.

Really not the solution

  • So in order to play video i have to go to chrome://flags/#autoplay-policy and change default to no user gesture. But this is not a solution.

So i was wondering is there a workaround for this ?

Sorted : Had to add mute=1 to iframe.

Thanks in advance.

2

I’ve run into this recently myself.

Could you detail the solution a little more, please?

3

Yeah sure. So in my case the website loaded their BG video via Youtube Iframe API - so the link looked something like this → YouTube
I had to add mute=1& to the link - so it counts as muted. That was my issue. If you are stuck let me know i can tae a look for you.

2 Likes
4

Ah. Not really the same issue at all then. I’m using webflow’s background video element and it seems to break every few days on Chrome. It’s the weirdest thing.

Check out Contented Puppies Paradise Home

Just watch the 3 images at the top. You’ll notice the one in the middle doing nothing. Then click on “supplies and accessories” and… tada! The middle one starts playing. Then click on “available puppies” which takes you back to the home page and… hooray! the middle one is playing now.

It’s super annoying and every single site that I use background video on does it simultaneously.

5

Yeah, it’s because Chrome default flag on videos are user input to play on non-muted videos. ( this is the part where i am confused - if video tag needs to have mute attribute ).

See can you try maybe add js to it? Maybe it helps.

var vid = document.getElementById("yourvideoid");
vid.muted = true;

When i preview in chrome dev tools and add mute attribute - video starts playing.
It is slightly confusing :frowning:

Just tested out with uploading mp4 with a sound. Webflow seems to set muted attribute by default, and video is playing. maybe @Cricitem try re-uploading video? I know that way back when i re-uploaded and it fixed the issue.

6

It’s doing it on multiple sites. My gut feeling is that the issue is actually with cloudflare since the video works when it is triggered multiple times by changing pages, etc.

7

Hmm… @Cricitem I was looking and comparing mine with yours and I did notice that your video doesn’t have “muted” on video tag. While mine has.

Your site:
your-site
Notice video tag doesn’t have muted

My:
mysite
And i don’t have issues with this site.

Can you re-upload and re-publish - see if that does fix ? Just an idea, mate.

8

Jesus Christ superstar right here. I’ve been scratching my head for a week with this one and this actually worked! Thank you sir