Autoplay video on scroll into view

Design help Custom code
1

Hi there,

I think I have a simple question, but it seems like I can’t find the right answer anywhere.

I wanna autoplay a video that I host from Dropbox when it is scrolled into view.

I can make it autoplay in the preview but not on scroll into view. On the published site the video doesn’t even play at all.

Here is my site Read-Only: [LINK](Webflow - Portfolio 2019)
(how to share your site Read-Only link)

2
1 Like
3

Do we have anything that works for Vimeo videos when used as background videos?

4

Hi,

I have been able to trigger the play and pause of a Vimeo embed using the gasp scroll trigger.

I used a i-frame embed for my Vimeo video and gave it an ID of #vimeo-video in the code embed block

Paste the below code into the Before body tags of you page

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<script>
// Video play and pause on scroll
  var player = new Vimeo.Player($("#vimeo-video")[0]);

  ScrollTrigger.create({
    trigger: "#vimeo-video", // can be switched to another element id or class
    start: "top center", // Adjust as necessary
    end: "bottom 30%", // Adjust as necessary
    //markers: true,  //switch this on to help visulise start and end points
    onEnter: () => {
      player.play();
      player.setMuted(false);
    },
    onLeave: () => {
      player.pause();
      player.setMuted(true);
    },
    onEnterBack: () => {
      player.play();
      player.setMuted(false);
    },
    onLeaveBack: () => {
      player.pause();
      player.setMuted(true);
    }
  });
</script>