Background Video - Disable Loop

[mgalindo]

Similar to some other posters, I am looking to disable the background video from looping once it’s played.

I tried several previous suggestions from a few other posts with no such luck.

I don’t see any console errors so I don’t think that’s the issue. Any suggestions would be greatly appreciated.

Previous posts here:

Header Background Video Loop

Hi Guys, I was searching the support forum to see if there is a way to disable looping of a background header video in Pro… I’ve found conflicting answers, such as this one that says it’s not possible without custom development: And these that offer jQuery/js accomplish it: I tried both of the solutions offered (although I may not have done it correctly), with no luck. Any help would be appreciated…

Stop Background Video from Looping

I used the jQuery you suggested to disable looping but it is not working. I made sure to target the right video but no luck. It keeps looping jQuery: jQuery(document).ready(function($){ setTimeout(function(){$(’#bg-smoke-beach video.x-mejs’).prop(‘loop’, false);},5000); }); Site: https://estoestulum.com/beta/ FYI I ended up hiding the video once it has played once. It’s not an elegant solution but it works. Could not disable loop for the life of me. var video = $('#bg-smok…

Disabling loop in background video not working

Hi there, I’m using the suggested solution from https://theme.co/apex/forum/t/background-video-not-playing-in-chrome-and-disable-loop/6049 which adds a function to the custom JS through setTimeout. I have added said function, but the video still loops on my site. Is there anything I might be missing? Please let me know if you need any additional information. Thanks, Thomas

[tristup]

Hi @mgalindo,
Thanks for reaching out.

You need to set the video loop false as well as need to trigger the pause event once the first time video is over. The following code may help you with this.
I would also recommend you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where any customization questions are answered.

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);
});

Remember that the above code will work if copied as it is and dont conflict with any existing style.
Please note that the code provided serve only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

NOTE: We will post this as a feature request so it might be taken into account in the future.

Hope it helps.
Thanks

[mgalindo]

@tristup

Thank you for the reply and solution.

Based on the number of requests I’ve seen a toggle of the loop function for the video in the background element would certainly be a welcomed feature for the future.

Thanks!

[tristup]

Hi @mgalindo,

You are most welcome. We have already made the request so it might be taken into account in the future. Please stay tuned for the succeeding theme updates.

Thanks