How to stop videobackground in layout grid from looping?

Bluesman · Post by **Bluesman** » Thu Jun 27, 2024 4:41 am

Hi friends... wonder how I can stop background video in a layout grid from a continuous loop? In video editing software it's set to not loop, but when inserting in WWB layout grid it loops when previewing.
Anyone been out for this?

Post by **Pablo** » Thu Jun 27, 2024 5:34 am

Background videos will always loop. There is no option to disable this.

jerryco · Post by **jerryco** » Thu Jun 27, 2024 5:04 pm

Just add 30 seconds plain background to the end of your video?

crispy68 · Post by **crispy68** » Thu Jun 27, 2024 6:02 pm

WB adds the video tag 'loop' in the html code. You will need to remove this.

Publish the page to a folder. Open up the .html file and look for code that looks like this:

Code: Select all

<video src="video/Fireworks.mp4" autoplay muted loop playsinline></video>

and remove the 'loop' from the above code and save it.

@Pablo, is this something could possibly be added as an option for the video background option to enable or disable?

Bluesman · Post by **Bluesman** » Thu Jun 27, 2024 6:15 pm

Tnx Pablo, jerryco and crispy for your advice. I'm rethinking this design/function, but sure I will consider your suggestions. But would be very nice with this function directly in the software as crispu suggest...

BaconFries · Post by **BaconFries** » Thu Jun 27, 2024 9:21 pm

Not a PC but on reading it may (maybe not) be possible adding a little script (jQuery) such as the following between the <head></head>

Code: Select all

<script>
jQuery( document ).ready(function($) {
    $('.loopnomore').removeAttr('loop');
});
</script>

It would also require a "class" to be added to the video as follows

Code: Select all

class="loopnomore"

As the above script is using jQuery it would also require it to be used in the source. If no jQuery is used you then you will need to include in the <head></head> as well.

Code: Select all

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

Note: Untested in anyway apart from my thoughts..

Bluesman · Post by **Bluesman** » Fri Jun 28, 2024 5:37 am

BaconFries wrote: ↑Thu Jun 27, 2024 9:21 pm Not a PC but on reading it may (maybe not) be possible adding a little script (jQuery) such as the following between the <head></head>
Code: Select all
<script>
jQuery( document ).ready(function($) {
    $('.loopnomore').removeAttr('loop');
});
</script>
It would also require a "class" to be added to the video as follows
Code: Select all
class="loopnomore"
As the above script is using jQuery it would also require it to be used in the source. If no jQuery is used you then you will need to include in the <head></head> as well.
Code: Select all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Note: Untested in anyway apart from my thoughts..

*Hi Bacon... tnx for the tip. This is more interesting to use as you don't have to adjust after every publish

I'm some unexperienced how to add the "class"...? Please give me a hint

BaconFries · Post by **BaconFries** » Fri Jun 28, 2024 7:03 am

See the following:
HTML Object
Read from: Add HTML to an object -->>using Inside Tag* to add the class

Bluesman · Post by **Bluesman** » Fri Jun 28, 2024 7:33 am

BaconFries wrote: ↑Fri Jun 28, 2024 7:03 am See the following:
HTML Object
Read from: Add HTML to an object -->>using Inside Tag* to add the class

Tried the option, but didn't do the thing and stoped the "Overlay Menu" from working... MAybe I didn't do it correct, but I will maybe change the approach for the page and continue...

Tnx all for the help

BaconFries · Post by **BaconFries** » Fri Jun 28, 2024 7:55 am

Overlay Menu" from working... MAybe I didn't do it correct

Maybe so maybe not...as you are using the Overlay Menu and that it also uses jquery then the following is not required
as it will conflict. Please remove the following as I suggested to use from between the <head></head> and keep all the rest in place and try again. As mentioned this was untested.

Code: Select all

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

www.wysiwygwebbuilder.com

How to stop videobackground in layout grid from looping?

How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?

Re: How to stop videobackground in layout grid from looping?