ChristophMatt Posted July 17, 2023 Share Posted July 17, 2023 (edited) 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. Edited July 17, 2023 by ChristophMatt Link to comment
Ziggy Posted July 17, 2023 Share Posted July 17, 2023 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. ChristophMatt 1 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
ChristophMatt Posted July 17, 2023 Author Share Posted July 17, 2023 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. Link to comment
ChristophMatt Posted July 17, 2023 Author Share Posted July 17, 2023 (edited) 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 July 17, 2023 by ChristophMatt Link to comment
Ziggy Posted July 17, 2023 Share Posted July 17, 2023 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. ChristophMatt 1 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
ChristophMatt Posted July 17, 2023 Author Share Posted July 17, 2023 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
TLMJC Posted August 12, 2023 Share Posted August 12, 2023 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. Link to comment
TLMJC Posted August 12, 2023 Share Posted August 12, 2023 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
TLMJC Posted August 12, 2023 Share Posted August 12, 2023 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. Link to comment
TLMJC Posted August 13, 2023 Share Posted August 13, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment