Background Videos Not Playing On Mobile, 2020

There have been multiple topics in this forum regarding this problem over the years. However, not many have come to a solution. Some found a workaround through custom code some years back, but none of those seem to work anymore. I was wondering if anyone has found a way to make background videos auto-play on mobile devices (it works on some android devices), without having to replace the video with a gif or just a static picture on mobile landscape. Excited to see what people have done regarding this problem in 2020!


Here is my site Read-Only: https://preview.webflow.com/preview/westmedia?utm_medium=preview_link&utm_source=dashboard&utm_content=westmedia&preview=faa58c215281f6aa62185217e02a0038&mode=preview

1 Like

I’m also looking for a solution to this!

This is really a “bug” (Not exactly a bug but missing HTML5 video attributes)

Webflow should add muted and playsinline for autoplay videos (Otherwise the auto play could be blocked on some devices).

Try this code (Only for one video):

<script>
/* mute and add playsinline to first DOM video on the page */
document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
  $("video").get(0).volume=0;
  $('video').attr('playsinline',true);
  $('video').attr('muted',"muted");
  $('video').get(0).play()
});
</script>

Copy → paste before body and update (Fix -or- Not).

official docs related:

iphone playsinline & muted:

<video muted> elements will also be allowed to autoplay without a user gesture.

<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>

https://webkit.org/blog/6784/new-video-policies-for-ios/

Related stackoverflow Q:
https://stackoverflow.com/questions/43570460/html5-video-autoplay-on-iphone/

chrome muted:

Chrome’s autoplay policies will change in April of 2018 and I’m here to tell you why and how this is going to affect video playback with sound.

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

3 Likes

Thank you for your help! Still, none of the coding seems to fix the problem. Here is a link to a page with one background video + the custom code added in the settings: https://westmedia.webflow.io/hvemervi

Read-Only: https://preview.webflow.com/preview/westmedia?utm_medium=preview_link&utm_source=dashboard&utm_content=westmedia&preview=faa58c215281f6aa62185217e02a0038&mode=preview

Maybe clear cache. Works for me (android and iPhone 6) + test on more than one device.

2 Likes

I was having the same issue.

Actually had a background video playing just fine on my iphone for 2 weeks then suddenly it stopped working. I just added the script above and it seems to be working just fine again.

Thank you!

Yes, thanks you it’s works great now!

Hi All,
It seems to be a feature of iOS that when “battery saver mode” is enabled, the videos do not play to errr… save battery. I assume that the same thing applies on Android. So if you are having issues, charge your device as the first port of call.

Kind regards.

Mark

9 Likes

This seems to be the case. Makes since, if you’re saving battery why auto play videos.

1 Like

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