Jump to content

how to prevent a background video from looping

Recommended Posts

  • 4 weeks later...

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 8 months later...
  • 2 weeks later...
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. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 month later...
  • 4 months later...
  • 5 months later...
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
  • 5 months later...
  • 1 month later...

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 by black.marketing
Link to comment
  • 1 month later...
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
  • 3 weeks later...
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
  • 4 months later...
  • 1 month later...

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.