Auto-scroll to next video when less than 30% of the current video is visible

Problem Description:
I’m trying to implement a feature where videos automatically play when they enter the viewport and scroll to the next video when less than 30% of the current video is visible. Currently, I have videos playing and pausing based on their visibility in the viewport, but I’m struggling to implement the scrolling functionality.

What I have tried:
I used the IntersectionObserver to detect when the videos are in view and play or pause them. However, I also want the page to scroll to the next video when the user has scrolled more than 30% past the current video.

Here’s the code I’m working with:

document.addEventListener('DOMContentLoaded', function() {
    const videos = document.querySelectorAll('.video-player');

    // Create an intersection observer
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            const video = entry.target;

            // If the video is in view
            if (entry.isIntersecting) {
                video.play(); // Play the video when it enters the viewport
            } else {
                video.pause(); // Pause the video when it leaves the viewport
            }
        });
    }, {
        threshold: 0.7  // Play the video when 70% is visible
    });

    // Observe each video element
    videos.forEach(video => {
        observer.observe(video);
    });
});

What I need:

1. I want to automatically scroll to the next video when less than 30% of the current video is visible.
2. The current implementation doesn’t seem to work as expected. The videos don’t always scroll to the next one, and sometimes the videos pause or behave inconsistently.
   Any suggestions on how I can improve the code to achieve the desired functionality would be greatly appreciated!