Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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

    #1489788

    Hey 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,
    Ismael

    #1489839

    Hi Ismael

    That seems to have had the opposite effect

    now the video starts at the end scene and ends at the start scene

    #1489856

    Hi,
    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,
    Mike

    #1489885

    perfect thank you

    #1489909

    Hi,

    Great! Glad to know this has been resolved. Please feel free to open another thread if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Background Video in colour section shows the beginning of video once it has play’ is closed to new replies.