Video - Do Not Start Till It Appears On Screen

[whitemedia]

Hi,

I am trying to add an animated signature into a website. I have tried using both a video (Video element) and animated GIF (Image element). In both cases the animation plays fine.

However, I do not want the animation to loop and want it to only start playing when the video / image element first enters the screen upon scrolling - the video is just 2 seconds long.

Is it possible to delay the start of the animation until the element actually appears on screen?

Many thanks,
Christopher

[marc_a]

Hi Christopher,

Thanks for reaching out!

To help you with question, we need to check the page URL. Would you mind sharing the page URL where you have your video element so that we can check and give you advise?

Thank you.

[whitemedia]

Hi @marc_a,

Thank you. All details in Secure Note.

Many thanks,
Christopher

[tristup]

Hi Christopher,

I have checked the video and found the issue on your About page. I have used the same video on a different page and it works fine. It might be due to some broken HTML, I would suggest you check by deleting the section one by one till the issue is fixed, and the last one you have deleted before the fix is the actual issue.

Thanks

[whitemedia]

Hi Tristup,

Thank you. Your reply presumably deals with the fact that the video does not always autoplay.

However, the original question still remains unanswered. Is there a way that the video does not start until it arrives in the viewport?

thanks,
Christopher

[prakash_s]

Hello Christopher,

Regretfully, there is no option in the Video element to delay the video autoplay until it arrives at its viewport. It would require custom development. I would suggest you contact a developer who can assists you with your concern. Please note that we don’t provide custom development support. it is out of the support scope.

Thanks for understanding

[whitemedia]

Hi Prakash,

Thanks for the reply.

I have found a way to achieve delaying the start of the video of a signature being written until the video is the viewport. I will share the method below, in case it helps anyone. With a bit of tweaking I am sure it could work using the Video Element too, rather than having to use raw html.

I used a Raw Content Element for the video and inserted the html:

<div class="vid">
  <video playsinline autoplay muted poster="">
    <source src="https://www.mydomain.com/wp-content/uploads/my-video.mp4" type="video/mp4">
  </video>
</div>

Then I added the CSS to keep the video to the widths I need for desktop and mobile views:

@media only screen and (min-width: 768px) {
  video {
    max-width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
}
}

@media only screen and (max-width: 767px) {
  video {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}
}

Finally I added the following Javascript to the Page JS:

gsap.registerPlugin(ScrollTrigger);

let allVideoDivs = gsap.utils.toArray('.vid');

allVideoDivs.forEach((videoDiv, i) => {
  
  let videoElem = videoDiv.querySelector('video')
  
  ScrollTrigger.create({
    trigger: videoElem,
    start: 'top 80%',
    end: 'top 20%',
    markers: true,
    onEnter: () => videoElem.play(),
    onEnterBack: () => videoElem.play(),
    onLeave: () => videoElem.pause(),
    onLeaveBack: () => videoElem.pause(),
  });
  
});

I hope this helps.

Thanks,
Christopher

[matt]

Appreciate you sharing that for others, Christopher, and glad you found a solution!