HELP! How to autoplay video background on mobile

Hello everyone, 

after spending loads of time without any success, I am kindly asking for the help and expertise of our community.

Can someone provide me please a code or any kind of suggestion on how to autoplay a video background on mobile?

Right now there is always a play button showing up on the mobile, where I would like it simply to "autoplay" and only play it "once" (no loop) just as on desktop version.

Here is the code I am using in the Code Injection section in the footer field, to prevent the video background of "looping":

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){    
  setTimeout( function() {
         $('video').removeAttr('loop');
    }, 5000);
});
</script>

Thanks a lot in advance for any advice.

Have you got the video added as a background video? If so you shouldn't get a play icon, it should automatically play and loop.

Hello Ziggy, thanks a lot for your help! Yes, I have just uploaded the video as a background. And I have not setup any "fallback" image for mobile.

 

In order to play the background only "once" I have put the following code via the "code injection" section in the footer field:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){    
  setTimeout( function() {
         $('video').removeAttr('loop');
    }, 5000);
  
  
});
</script>

That looks correct, but these types of edits can have unintended consequences, and it looks like this has caused a problem, I'm not sure your best fix for this.

Thank you again Ziggy for your expertise. I have removed now the code from the code injection in order to see, if the video can autoplay on mobile. It is still the same result, where to video on mobile is not playing automatically. Do you have any idea what is the problem?

Hi, I'm having the same issue. Video is set as a background video without a fall back image. I haven't got any additional scripts or any custom code that are affecting these divs. Oddly it was fine a week ago but now there is always a play button on mobile? Desktop is fine.

Thanks in advance for any help.

Just to add more to this. It was working for a day on an iphone 12 but reverted back to the play button 24 hours later without any change to the code or content. Is there some power saving gubbins happing behind the scenes on OS? I get the same behaviour on safari and Chrome on two iphone 12s. Will try and test on Android.

Thanks

Ok, so if you do upload a mobile image as a fallback then it defaults to that. It seems Squarespace is weirdly using a single frame of the video and a play button as the mobile fallback option? Strange.

So I found out what the issue is. It definitely is a power consumption issue on iOS. Once the phone drops beneath 20% background videos don't play on either Safari or Chrome. The Squarespace issue is that, if you dont have a backup mobile image selected then it should default to the colour background but it doesnt, it defaults to a still of the uploaded video with a playbutton that doesnt function.

The obvious 'fix' is to upload a backup mobile image and never rely on the background colour as a fall back.