Playing and pausing multiple background videos separately

Design help Custom code
1

Hi!
I’m trying to implement this tutorial, and it works - BUT if you have a bunch of background videos it works on all of them at once, which is weird.

I’m really not much of a coder but what i’m trying to do is:

  1. Prevent autoplay on videos
  2. Play/pause one video at a time when clicking on it or on a button.

Any ideas? :pray:

Here’s the code from the tutorial:


<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
   function togglePlayPause() {
      $('video').each(function() {
       if (this.paused) {
         this.play();
       } else {
         this.pause();
       }
     });
   }
   function toggleVisibility() {
     $('video').each(function() {
     var opacity = $(this).css('opacity') == 0 ? 1 : 0
     $(this).css("opacity", opacity);
   });
   }
   $('#video-toggle').click(togglePlayPause);
});

</script>