Giving each loop post unique numbers so that Wordpress would treat separately

Question

So I got this code right now.

The problem I get is that it executes only for the first video.

I know I need to give each loop post a unique number in order for WordPress to treat them separately. Same for my script.

How can I achieve that?

Need help guys!

<!-- Autoplay, on view video START-->   
<script>
    const localVideo = document.getElementById('local-video');

    // Play the video when it's in the viewport
    window.addEventListener('scroll', function() {
        const rect = localVideo.getBoundingClientRect();
        const windowHeight = window.innerHeight || document.documentElement.clientHeight;

        if (rect.top >= 0 && rect.bottom <= windowHeight) {
            localVideo.play();
        } else {
            localVideo.pause();
        }
    });

    // Pause video when page is not visible
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            localVideo.pause();
        } else {
            localVideo.play();
        }
    });
</script>


<!-- Autoplay, on view video END--> 


 <div id="video-container">
        <video id="local-video" loop autoplay controls>
            <source src="<?php echo $video ?>" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>



#video-container {
    width: 360px;
    height: 640px;
    overflow: hidden;
    position: relative;
}

#local-video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 360px;
    height: 640px;
    border-radius: 30px;
}

Answer 1

1. Change your <video> id to be a class, so that there can be multiple of them on a page.
2. Use .querySelectorAll('video.local-video') to get all video elements with the class name of .local-video.
3. Loop through all of those elements, and play them accordingly.

Code:

<!-- Autoplay, on view video START-->   
<script>
    const localVideos = document.querySelectorAll('video.local-video'); // <= select ALL instances of .local-video

    // Play the video when it's in the viewport
    window.addEventListener('scroll', function() {
        localVideos.forEach((video) => { // <= loop through ALL videos and perform your function
            const rect = video.getBoundingClientRect();
            const windowHeight = window.innerHeight || document.documentElement.clientHeight;

            if (rect.top >= 0 && rect.bottom <= windowHeight) {
                video.play();
            } else {
                video.pause();
            }
        });
    });

    // Pause video when page is not visible
    document.addEventListener('visibilitychange', function() {
        localVideos.forEach((video) => { // <= also loop here
            if (document.hidden) {
                video.pause();
            } else {
                video.play();
            }
        });
    });
</script>


<!-- Autoplay, on view video END--> 
<div id="video-container">
    <video class="local-video" loop controls>
        <source src="<?php echo $video ?>" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>