How to stop background video from looping?

Site URL: http://algora.com.au

Site URL: http://algora.com.au

Landing page for this website (password is just "algora") has a section background which links to the following video.

This loops after 17 seconds which is a bit jarring. How can I stop it looping and just pause at the last frame?

Worst case I will have to edit the video so the last frame is extended for a long time... like an hour... hopefully there is a more natural way to do it.

It's been a little while since you posted this so you might've found a solution but I thought I'd post this here in case someone else (like me) went through all of these questions about stopping a video loop without finding an answer.

The following code paused the lander background video on the last frame, maybe give it a try?

<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>

13 hours ago, black.marketing said:

It's been a little while since you posted this so you might've found a solution but I thought I'd post this here in case someone else (like me) went through all of these questions about stopping a video loop without finding an answer.

The following code paused the lander background video on the last frame, maybe give it a try?

<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>

Hey mate, where do I punch in that code? If it works it's exactly what I need!

On 3/30/2022 at 7:33 AM, TimLukey said:

Hey mate, where do I punch in that code? If it works it's exactly what I need!

Settings > Advanced > Code Injection > Footer

On 3/29/2022 at 7:28 AM, black.marketing 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>

This is not working on my 7.1 site.  Is this the correct solution?

On 3/31/2022 at 12:03 AM, tuanphan said:

Settings > Advanced > Code Injection > Footer

This is not working for me. My video is a section background at the top of my home page. Is there somewhere else I should be putting this code?

On 1/27/2023 at 1:31 AM, sspec1004 said:

This is not working for me. My video is a section background at the top of my home page. Is there somewhere else I should be putting this code?

Try adding this line to top of above code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

On 2/1/2023 at 7:47 AM, tuanphan said:

Try adding this line to top of above code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

 

I am still unable to get this to work on a 7.1 page. Can anyone please share how they got this to work?

On 3/2/2023 at 9:47 PM, david-eh said:

I am still unable to get this to work on a 7.1 page. Can anyone please share how they got this to work?

What is your site url?

On 3/5/2023 at 9:41 AM, tuanphan said:

What is your site url?

https://www.poesiplakater.dk/

Password: eh1972

Try this new code

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

1 hour ago, tuanphan said:

Try this new code

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

 

I pasted it in config > settings > advanced > code-injection > FOOTER

Sadly no change to the video.

On 3/10/2023 at 10:47 AM, tuanphan said:

Try change to this

<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>

If it still doesn't work, keep this code in Code Injection & let me know, we can check it again easier

That worked! Thanks a lot for your help.

On 3/10/2023 at 9:47 AM, tuanphan said:

Try change to this

<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>

If it still doesn't work, keep this code in Code Injection & let me know, we can check it again easier

You are an absolute saviour.

Well, this sucks.

I added the code that tuanphan posted to my footer during my trial period and it worked like a charm.

Just decided to subscribe and now I find out that the code is being ignored because access to the Code Injection feature is an additional subscription tier more than the Personal site subscription I purchased 😤

Feels like a bait and switch 😒

On 4/28/2023 at 3:39 AM, Cy832D3f3nd0R said:

Well, this sucks.

I added the code that tuanphan posted to my footer during my trial period and it worked like a charm.

Just decided to subscribe and now I find out that the code is being ignored because access to the Code Injection feature is an additional subscription tier more than the Personal site subscription I purchased 😤

Feels like a bait and switch 😒

You can add it to Markdown Block on Footer (however this, maybe won't work in future)

This code works on 7.1 provided t is inserted into the page itself.

Page > Settings > Advanced

This will also limit the load on your site as it only loads on that page and not the entire site. Putting it in the header or footer loads it in every page, decreasing performance..

<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>

On 3/10/2023 at 1:47 AM, tuanphan said:

Try change to this

<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>

If it still doesn't work, keep this code in Code Injection & let me know, we can check it again easier

This does not work for our site... https://the805room.com/

Video in the header keeps looping sadly.  Please advise.

On 6/17/2023 at 5:49 AM, Oniracom said:

This does not work for our site... https://the805room.com/

 

Video in the header keeps looping sadly.  Please advise.

It looks fine to me. Did you solve it?

Hello, having the same issue with https://satnicklau.com/

Upgraded from personal to business and still same issue.

Used this code: 

In the code snippet in footer and in header to troubleshoot in settings

On 6/19/2023 at 12:10 AM, tuanphan said:

It looks fine to me. Did you solve it?

On 8/8/2023 at 8:53 AM, SatnickLau said:

Hello, having the same issue with https://satnicklau.com/

Upgraded from personal to business and still same issue.

Can you send all current code in Code Injection?

is there a way to target this code to a single video on the page?

i used this code and i have multiple looping videos on my page but i only want to stop the looping of one video.

this is my website: https://www.flexmedia.is/

<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>

On 10/27/2023 at 11:29 PM, EgillGauti said:

is there a way to target this code to a single video on the page?

i used this code and i have multiple looping videos on my page but i only want to stop the looping of one video.

this is my website: https://www.flexmedia.is/

<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>

Change this line

 $('video').removeAttr('loop');

to this

 $('#enter-block-id video').removeAttr('loop');

Use this tool to find block id: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff