Vimeo video controls / autoplay on scroll into view

I have a simple web splash page with three Vimeo videos linked. These videos all have audio, so can’t play in the background. I need the videos to behave the following way:

  • all video controls (play/pause/scrubber) hidden
  • video title/name hidden
  • video autoplays when scrolling into view and stops at the end; no looping

So, as the user scrolls down the page, the videos begin to play in sequence when scrolled into view. Not all at once, and none requiring a click to play. I may want to add an offset value so each video plays when scrolled mostly into view.

I hope this all makes sense.


Here is my site Read-Only: Webflow - Collective Instinct Splash
(how to share your site Read-Only link)

Perfectly.

Those features are handled by the Vimeo API, so in order to finely control the behavior of your videos, you need quite serious custom code. Luckily for you, Vimeo API is notoriously easier to develop with than Youtube API. The main benefit of using APIs to control multiple videos in a page is that only one video player is really loaded at any time in the page. It’s important because a video player is quite demanding in terms of processing power.

If you’re not a coder, you’ll kind of need one to achieve this. You can maybe find ready made code on the web but it may be difficult to adjust to your exact needs (especially the scrolling part).

i have found this code.
this worked great for me

<video id="video2" controls autoplay loop >
            <source src="https://storage.googleapis.com/novoglace/novoglace_image_web.mp4" type='video/mp4'/>

        </video>
        
        <script>
            var video = document.getElementById('video2'), fraction = 0.8;

            function checkScroll() {
                var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
                b = y + h, //bottom
                visibleX, visibleY, visible;

                visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

                visible = visibleX * visibleY / (w * h);

                if (visible > fraction) {
                    video.play();
                } else {
                    video.pause();
                }
            } checkScroll();
            window.addEventListener('scroll', checkScroll, false);
            window.addEventListener('resize', checkScroll, false);

        </script>
        
        <style>
#video2, #alternative {
    width: 100%; /* Could also use width: 100%; */
    height: auto;
    object-fit: cover;
    position: absolut; /* Change position to absolute if you don't want it to take up the whole page */
    left: 0px;
    top: 0px;
    z-index: 1;
}
</style>