I am building a website that will have 5 animations playing as you scroll down the page, one in each section. I have chosen vimeo to host them and they will be playing as loop background videos using the following embed code:
iframe src=“https://player.vimeo.com/video/76979871?background=1” width=“1000px” height=“800px” frameborder=“0” allow=“autoplay; fullscreen” allowfullscreen loop=“1” muted=“1”>
The looping animations are only 6-10 seconds long, however, this will be quite performance demanding if they are all playing at once. Is there a way to have each video start playing when it comes into view and pause when it exits the view? I have seen a few similar queries but haven’t managed to get any of them to work currently.
Thanks in advance!
Here is my site Read-Only: Link