Integrating javascript to single page website

Hello,

I am trying to create a single page website that showcases photos as you scroll down. The entire background would be a video and as you scroll down the video changes to a different one. I wrote custom java script code to achieve this as shown below. What is the best way to integrate this into squarespace? I am new and I have been messing around the site but I am not sure whether to go through developer mode and try to modify or if I can achieve this easier through the standard UI or other methods. Any suggestions would be appreciated!

var video = document.getElementById('v0');
        var source = document.createElement('source');
  

        window.onscroll = function(){
            console.log(document.body.scrollTop);
            console.log(document.documentElement.scrollTop);
            
            if (document.documentElement.scrollTop > 2000 && document.documentElement.scrollTop <5000) {   
                if(video.src !== 'http://127.0.0.1:5500/woman.mp4'){
                video.src='http://127.0.0.1:5500/woman.mp4';
                }
        
            }
            if (document.documentElement.scrollTop > 5000 && document.documentElement.scrollTop <8500) {   
                if(video.src !== 'http://127.0.0.1:5500/flower.mp4')
                video.src='http://127.0.0.1:5500/flower.mp4';
        
            }  


            if (document.documentElement.scrollTop > 0 && document.documentElement.scrollTop <2000){
                if(video.src !== "http://127.0.0.1:5500/Edwin.mp4" )
                    video.src="http://127.0.0.1:5500/Edwin.mp4";
                    
                }
        }

Add to Page Header. Each page has page header (click Gear icon, right of page name > Settings (or Advanced) > Page Header.