Streaming live at 10am (PST)

Targeting Background Videos for Restart on Scroll into View

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: Webflow - TEST

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.

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>
1 Like

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