Playback into view - only one video

Hi,

I got that piece of custom code that works just fine to trigger a video playback when entering into view. The only thing is that it’s applied to all videos on the page. I would rather it be applied only to the video at the top (the nectar blast). I know it’s basic, but I know nothing about .js. Thanks! :slight_smile:

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

Here is my site Read-Only: Webflow - NimbusNectar

hi @Pierre-Etienne_Poul1 there is a several ways how to apply your code to only on element. the easiest is to add to this video an id and select element by id.

just to be aware that you can face some issues as this lib is not maintained for 10 years. 10 years in development is like 10.000 years of human life.

1 Like

Problem solved, thanks Stan.

The lib is quite old, but after some research, it’s still one of the most lightweight solutions to do so. The real challenge is to assign an id to a Webflow’s bg-video element (which can’t be done via the setting panel). Instead, you need to inspect the source of the said bg elements after publishing your website: there you will find the automatically assigned id in the video tag of the object.

Here’s the code that did it for me (before body tag). Again, you will need to define your own id by inspecting your published website:

<script>
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/vissense/0.10.0/vissense.min.js', function() {
  const nectarblastVideo = document.getElementById('75b695c6-3dfe-0df4-42c8-cf93cfd39328-video');
  if (!nectarblastVideo || nectarblastVideo.tagName !== 'VIDEO') return;

  VisSense.VisMon.Builder(VisSense(nectarblastVideo, {
    fullyvisible: 0.5
  }))
  .on('fullyvisible', function() {
    nectarblastVideo.currentTime = 0;
    nectarblastVideo.play();
  })
  .on('hidden', function() {
    nectarblastVideo.pause();
  })
  .build().start();
});
</script>

what this lib actually does so special you need a lib. Can you just use plain vanilla?

Are you sure that you can’t add id attribute from WF UI?

// Get first element with name = `myID`
const el1 = document.querySelector('[myID]');

You are probably right; I didn’t know we could simply add an ID using the custom attributes panel (custom code is obviously not my thing as you reckon). I guess I checked an outdated thread. And there is also clearly a vanilla option. Could simply ask Chat GPT and test it. Thanks pal!