Rewind and replay background video when scrolled into view

Community resources Webflow Tips
#1

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

#2

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

1 Like