Hope someone could help assist with a correction here. I am building a video that plays as you scroll, the code is working no problem but I'm hitting a snag when using any other video but the Apple one I was able to find.

The left in the codepen is ripped from Apple & right is my resized video. No matter what settings I've inputed for the video (bitrate type/value, plus bunch of anything and everything) - it will never match the same smooth flow. Would anyone know what Apple is doing to optimise their video for such smooth play here?

Codepen: https://codepen.io/andrew-leto/pen/PoRPqWE

<style>
    #video-player { background: unset; width: 600px; float: left; margin-right: 20px; }
    #video-player-2 { background: unset; width: 600px; float: left; margin-right: 20px; }
    .scroll-video {height: 500vh;}
    .content {height: 80vh; width: 100%; position: sticky; top:75px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    video {width: 100%;}
</style>


<div id="video-player" class="scroll-video">
    <div class="content">
        <video  width="600" autobuffer preload muted loop src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4"></video>
    </div>
</div>

<div id="video-player-2" class="scroll-video">
    <div class="content">
        <video  width="600" autobuffer preload muted loop src="https://fiskeangling.com.au/test/macpro_main_desktop_2.mp4"></video>
    </div>
</div>



<script>
    const registerVideo = (bound, video) => {
    bound = document.querySelector(bound);
    video = document.querySelector(video);
    const scrollVideo = ()=>{
        if(video.duration) {
            const distanceFromTop = window.scrollY + bound.getBoundingClientRect().top;
            const rawPercentScrolled = (window.scrollY - distanceFromTop) / (bound.scrollHeight - window.innerHeight);
            const percentScrolled = Math.min(Math.max(rawPercentScrolled, 0), 1);
            video.currentTime = video.duration * percentScrolled;
        }

        requestAnimationFrame(scrollVideo);
    }

    requestAnimationFrame(scrollVideo);
    }
    registerVideo("#video-player", "#video-player video");
    registerVideo("#video-player-2", "#video-player-2 video");
</script>

Thank you all!