Kastrupsen Posted November 16, 2019 Share Posted November 16, 2019 How do I stop a background video from looping? Link to comment
cmacd827 Posted December 14, 2019 Share Posted December 14, 2019 Hi, the video banner on bedford loops by default. I'm trying to get it to just play once. Does anyone know how to do this? I'm assuming I have to use custom code. Link to comment
paul2009 Posted December 15, 2019 Share Posted December 15, 2019 Video banners play continuously on all templates. There are no built-in options to stop it after playing; it will require a custom solution. A Developer could usually build something suitable at a reasonable cost. I’ve built a few similar solutions that show the fallback image when the video has finished. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. 🤒 I'm currently in hospital and may not respond quickly to your posts. Link to comment
Guest Posted September 3, 2020 Share Posted September 3, 2020 Site URL: https://www.rais3d.com.au/ Hello, Just wondering if anyone knew how to prevent background video from looping and to just stop on the last frame / add an image after video to replace video. Password: youraismeup Thanks Link to comment
tuanphan Posted September 12, 2020 Share Posted September 12, 2020 Hi. You can use jQuery to show image + hide video after X seconds Do you still need help on this? Which plan do you use? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
paul2009 Posted September 12, 2020 Share Posted September 12, 2020 4 hours ago, tuanphan said: You can use jQuery to show image + hide video after X seconds The problem with this approach is that the video will load at different rates on different devices. For a robust solution, you need to control the video API, play the video once and when PlayerState indicates that the video has ended, hide the video to reveal the fallback image. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. 🤒 I'm currently in hospital and may not respond quickly to your posts. Link to comment
Oain Posted October 15, 2020 Share Posted October 15, 2020 I have a similar issue, I have a video on Vimeo that loops at the end which I'm trying to stop after it plays once. Cant seem to do it. Link to comment
aliciaWPP Posted February 24, 2021 Share Posted February 24, 2021 (edited) I'm trying to turn off the background video loop and have it stop on the last frame. I've tried JS but it's not working. Any suggestions? Edited February 24, 2021 by aliciaWPP Link to comment
drdavis74 Posted August 24, 2021 Share Posted August 24, 2021 Hi, I have a background video that I want to stop playing on the last frame instead of looping. I have tried youtube and uploading and there is no way to control that. Is there any code I can inject that will enable me to do that? thank you Link to comment
tuanphan Posted August 30, 2021 Share Posted August 30, 2021 On 8/24/2021 at 9:47 PM, drdavis74 said: Hi, I have a background video that I want to stop playing on the last frame instead of looping. I have tried youtube and uploading and there is no way to control that. Is there any code I can inject that will enable me to do that? thank you Hi, Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jenartsquare Posted February 6, 2022 Share Posted February 6, 2022 Can anyone help with this? It should be an easy fix, but no one seems to have the answer. Link to comment
black.marketing Posted March 29, 2022 Share Posted March 29, 2022 (edited) Look, I know I'm a bit late to the party, but I was just trying to solve this issue and discovered a fix that worked for me when using a self-hosted video. <script> jQuery(document).ready(function($){ function no_bg_loop () { $('video').prop('loop', false); } $(document).ready( no_bg_loop ); $(window).load ( no_bg_loop ); no_bg_loop(); setTimeout(function(){ jQuery('video.x-mejs.has-stack-styles').on('ended', function() { jQuery(this)[0].pause(); }); },5000); }); </script> Edited March 31, 2022 by black.marketing tuanphan 1 Link to comment
mwinn3 Posted May 24, 2022 Share Posted May 24, 2022 On 3/28/2022 at 9:43 PM, black.marketing said: Look, I know I'm a bit late to the party, but I was just trying to solve this issue and discovered a fix that worked for me when using a self-hosted video. <script> jQuery(document).ready(function($){ function no_bg_loop () { $('video').prop('loop', false); } $(document).ready( no_bg_loop ); $(window).load ( no_bg_loop ); no_bg_loop(); setTimeout(function(){ jQuery('video.x-mejs.has-stack-styles').on('ended', function() { jQuery(this)[0].pause(); }); },5000); }); </script> @black.marketingWhere did you apply this code to on your site? Having the same issue and looking for a solve myself Link to comment
mwinn3 Posted May 24, 2022 Share Posted May 24, 2022 On 8/29/2021 at 8:46 PM, tuanphan said: Hi, Do you still need help on this? @tuanphanI am having the same issue with a background video autoplaying. Did you have a solution that would have it stop after one complete cycle? Link to comment
gdmartino Posted June 11, 2022 Share Posted June 11, 2022 Uuuuugh so many things keep making me want to jump from squarespace to wordpress and this is another thread that adds to the pile. Has anyone worked out how to do this yet? Link to comment
gdmartino Posted June 11, 2022 Share Posted June 11, 2022 On 5/25/2022 at 6:20 AM, mwinn3 said: @black.marketingWhere did you apply this code to on your site? Having the same issue and looking for a solve myself On 5/25/2022 at 6:20 AM, mwinn3 said: <script> jQuery(document).ready(function($){ function no_bg_loop () { $('video').prop('loop', false); } $(document).ready( no_bg_loop ); $(window).load ( no_bg_loop ); no_bg_loop(); setTimeout(function(){ jQuery('video.x-mejs.has-stack-styles').on('ended', function() { jQuery(this)[0].pause(); }); },5000); }); </script> There's a syntax error on the first line. Link to comment
tuanphan Posted June 12, 2022 Share Posted June 12, 2022 On 6/11/2022 at 4:45 PM, gdmartino said: There's a syntax error on the first line. The code should be insert to Settings > Advanced > Code Injection > Footer Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
dnmddy Posted October 17, 2022 Share Posted October 17, 2022 Any way to apply that code to my site? Or any better solution??? https://supportcalvarymemphis.org/ Link to comment
1to3go Posted November 23, 2022 Share Posted November 23, 2022 Go this to work, thanks! Now if it can display the (a) background image at stop of the video that would be perfect. 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