Targeting Background Videos for Restart on Scroll into View

Design help Custom code
1

Hi.

The link below has 3x background videos that are set to restart whenever they scroll into view (via custom footer code) which can sometimes be handy. I would like the ability however to have some videos do this, and some still behave as normal (just play constantly and loop regardless of scroll position).

So let’s say videos RED & BLUE should restart on scroll into view, and GREEN should just play and loop.

Any clever folk out there that can tell me how I can target the classes of the individual videos to achieve this?

Thanks.

Here is my site Read-Only: https://preview.webflow.com/preview/test-84dd84?utm_medium=preview_link&utm_source=dashboard&utm_content=test-84dd84&preview=6c6e413ba5f0b93bcc2e4284cbb78840&workflow=preview

2

Hi Tony,

Did you figure this out? I have 3 sliders, each with a background video. I am trying to restart each video on slide change. Any ideas or your custom footer code might help if you can share it.

3

Hi Ranjit,

I’m afraid not Sir. No one posted any thoughts on this one.

Below is the custom footer code. This targets the video element and is therefore global so restarts any background video when scrolled out of view and back in again.

Good luck.

<script>
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/vissense/0.10.0/vissense.min.js', function() {
  const vids = document.getElementsByTagName('video'); 
  if(vids.length === 0) return;
  Array.prototype.map.call(vids, function(myVideo) {
    VisSense.VisMon.Builder(VisSense(myVideo, {
      fullyvisible: 0.8
    }))
    .on('fullyvisible', function() {
      myVideo.currentTime = 0;
      myVideo.play();
    })
    .on('hidden', function() {
      myVideo.pause();
    })
    .build().start();
  });
});
</script>
2 Likes
4

Take out “myVideo.currentTime = 0;” to have it restart video where it paused

1 Like
5

Thanks Man, this solved it for me.

6

Thanks for the code!