Streaming live at 10am (PST)

Rewind and replay background video when scrolled into view

For Webflow background video component, use this site footer code to rewind the looping video when user scrolls it into view:

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

Also, feel free to contact me for further custom code help and/or customization of third-party plugins

This is really useful. I want to be able to trigger it only on certain videos though. I have set up a page with 3x background videos (all set to restart when scrolled into view thanks to the above code).

How would I go about specifying? Let’s say I wanted RED & BLUE to restart, but GREEN to just play and loop constantly?

https://preview.webflow.com/preview/test-84dd84?utm_medium=preview_link&utm_source=designer&utm_content=test-84dd84&preview=6c6e413ba5f0b93bcc2e4284cbb78840&workflow=preview