Jump to content

HELP! How to autoplay video background on mobile

Recommended Posts

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.

video_background_play_button_mobile.PNG

Edited by ChristophMatt
Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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>

Edited by ChristophMatt
Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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?

Link to comment
  • 4 weeks later...

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.

image.thumb.jpeg.0e4d66d59adfecf1663cd625a0cafe2d.jpeg

Link to comment

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

 

 

 

Link to comment

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.