Is there anyone who can try the GSAP code I used for the video scroll?

We have a webpage that uses a video at the top, and we’ve implemented GSAP to show this video on scroll. However, we are facing a few issues:

1- On both mobile and desktop versions, the video lags a lot when we scroll and doesn’t play smoothly.

2- Another issue on mobile is that with Elementor’s built-in features, the video doesn’t stay sticky and gets scrolled away into the next container. We want the video to stay in view until it’s done before moving to the next container.

3- We’ve tried to make the sticky effect work better with some CSS, but it’s not looking great because when we set a z-index, the next container scrolls over the video.

4- Lastly, when users scroll on mobile, they need to tap 7-8 times for the video to finish. I want to increase the scroll speed so users can finish the video with just 2-3 scrolls and then move to the next container.

Any help or suggestions would be greatly appreciated! Thanks!
my code :

<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>  

<script>  
    $(document).ready(function() {  
        console.clear();  
        $('video').addClass('video-background');  

        const video = document.querySelector(".video-background");  
        let src = video.currentSrc || video.src;  
        console.log(video, src);  

        gsap.registerPlugin(ScrollTrigger);  

        let tl = gsap.timeline({  
            defaults: { duration: 1 },  
            scrollTrigger: {  
                trigger: "#container",  
                start: "top top",  
                end: "bottom bottom",  
                scrub: true,  
                onEnter: () => {  
                    video.play();  // پخش ویدئو در زمان ورود به بخش  
                },  
                onLeave: () => {  
                    video.pause(); // توقف ویدئو در زمان خروج از بخش  
                },  
                onEnterBack: () => {  
                    video.play();  // پخش ویدئو در زمان بازگشت به بخش  
                },  
                onLeaveBack: () => {  
                    video.pause(); // توقف ویدئو در زمان خروج دوباره از بخش  
                }  
            }  
        });  

        once(video, "loadedmetadata", () => {  
            tl.fromTo(  
                video,  
                {  
                    currentTime: 0  
                },  
                {  
                    currentTime: video.duration || 1,  
                    ease: "none" // عدم اعمال لذت به anim  
                }  
            );  
        });  

        setTimeout(function () {  
            if (window["fetch"]) {  
                fetch(src)  
                    .then((response) => response.blob())  
                    .then((response) => {  
                        var blobURL = URL.createObjectURL(response);  
                        video.setAttribute("src", blobURL);  
                        video.load(); // بارگذاری دوباره ویدئو  
                    });  
            }  
        }, 1000);  

        // ایجاد یک انیمیشن برای شفافیت ویدئو  
        ScrollTrigger.create({  
            trigger: "#container",  
            start: "top top",  
            end: "bottom bottom",  
            onUpdate: self => {  
                video.style.opacity = 1 - self.progress; // شفافیت ویدئو با اسکرول  
            }  
        });  
    });  

    function once(el, event, fn, opts) {  
        var onceFn = function (e) {  
            el.removeEventListener(event, onceFn);  
            fn.apply(this, arguments);  
        };  
        el.addEventListener(event, onceFn, opts);  
        return onceFn;  
    }  
</script>

The code I implemented above lags when scrolling on mobile. Here’s the link for you to better understand the issue: https://demo.arendlighting.com/انواع-چراغ-خطی/