Page 1 of 1
How to stop videobackground in layout grid from looping?
Posted: Thu Jun 27, 2024 4:41 am
by Bluesman
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?
Re: How to stop videobackground in layout grid from looping?
Posted: Thu Jun 27, 2024 5:34 am
by Pablo
Background videos will always loop. There is no option to disable this.
Re: How to stop videobackground in layout grid from looping?
Posted: Thu Jun 27, 2024 5:04 pm
by jerryco
Just add 30 seconds plain background to the end of your video?
Re: How to stop videobackground in layout grid from looping?
Posted: Thu Jun 27, 2024 6:02 pm
by crispy68
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?
Re: How to stop videobackground in layout grid from looping?
Posted: Thu Jun 27, 2024 6:15 pm
by Bluesman
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...
Re: How to stop videobackground in layout grid from looping?
Posted: Thu Jun 27, 2024 9:21 pm
by BaconFries
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
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..
Re: How to stop videobackground in layout grid from looping?
Posted: Fri Jun 28, 2024 5:37 am
by Bluesman
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
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
Re: How to stop videobackground in layout grid from looping?
Posted: Fri Jun 28, 2024 7:03 am
by BaconFries
See the following:
HTML Object
Read from:
Add HTML to an object -->>using Inside Tag* to add the class
Re: How to stop videobackground in layout grid from looping?
Posted: Fri Jun 28, 2024 7:33 am
by Bluesman
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
Re: How to stop videobackground in layout grid from looping?
Posted: Fri Jun 28, 2024 7:55 am
by BaconFries
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>