
-
AuthorPosts
-
October 2, 2025 at 9:06 pm #1489782
Hi
I am having an issue with the Background Video in the colour section.
When the video finishes, it shows the opening frame.
how do I get it to stop at the end frame?If I add the video in the advanced layerslider, it does not revert to the initial frame.
I have both examples on the url given
Thanks in advance for any assistance
October 3, 2025 at 6:37 am #1489788Hey PhatJ,
Thank you for the inquiry.
Try to add a Custom CSS Class name (e.g., av-video-section-control) to the Color Section element by going to Advanced > Developer Settings, then add the following code to the functions.php file to pause the video on the last frame and prevent it from restarting.
function av_custom_script() { ?> <script> document.addEventListener("DOMContentLoaded", function () { const videos = document.querySelectorAll(".av-video-section-control video"); videos.forEach(function(video) { video.removeAttribute("loop"); video.addEventListener("ended", function () { video.currentTime = video.duration; video.pause(); }); }); }); </script> <?php } add_action('wp_footer', 'av_custom_script');
This should help: https://kriesi.at/documentation/enfold/add-custom-css/
Best regards,
IsmaelOctober 3, 2025 at 11:05 pm #1489839Hi Ismael
That seems to have had the opposite effect
now the video starts at the end scene and ends at the start scene
October 4, 2025 at 3:31 pm #1489856Hi,
When I check your test page the “opening frame” is relly the background image so use this css to hide:#top.page-id-11644 #av_section_1 { background-image: none; }
note the page ID in the css, remove or adjust for your working page.
Then leave Ismael’s script to stop the loop and add this script to end on the last frame/second, your video is 29s so the script ends on 28s. Adjust for future videos and adjust the page ID.
Add this to your child theme functions.php:function pause_video_on_last_sec() { ?> <script> if (document.body.classList.contains('page-id-11644')) { var x = document.getElementsByClassName("avia_video"); var i; for (i = 0; i < x.length; i++) { x[i].addEventListener("timeupdate", function(){ if(this.currentTime >= 28) { this.pause(); } }); } } </script> <?php } add_action( 'wp_footer', 'pause_video_on_last_sec', 99 );
Best regards,
MikeOctober 6, 2025 at 1:31 pm #1489885perfect thank you
October 7, 2025 at 6:40 am #1489909 -
AuthorPosts
- The topic ‘Background Video in colour section shows the beginning of video once it has play’ is closed to new replies.