JSFiddle - React, Tailwind, and code Playground

HTML

<div id="video-effect-wrapper">
            <video muted autoplay>
                <source src="https://ndvibes.com/test/video/video.mp4" type="video/mp4" id="video">
            </video>
            
            <div id="text-display"></div>
            <div class="text first">
                Scroll down to test this little demo
            </div>
            <div class="text">
                Still a lot to improve
            </div>
            <div class="text">
                So please help me
            </div>
            <div class="text">
                Thanks! :D
            </div>
        </div>
        <div id="video-placeholder">
             
        </div>
        <div id="other-parts-of-website">
            <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>

        </div>

CSS

body {
                margin: 0;
                padding: 0;
                background-color: green;
            }
            #video-effect-wrapper {
                height: auto;
                width: 100%;
            }
            #video-effect-wrapper video {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: -2;
                object-fit: cover;
            }
            #video-effect-wrapper::after {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
                background: #000000;
                background: linear-gradient(to top, #434343, #000000);
                opacity: 0.4;
                z-index: -1;
            }
            #video-effect-wrapper .text {
                color: #FFFFFF;
                font-weight: bold;
                font-size: 3em;
                width: 100%;
                margin-top: 50vh;
                font-family: Arial, sans-serif;
                text-align: center;
                opacity: 0;
                
                /*
                background-color: blue;
                */
            }
            #video-effect-wrapper .text.first {
                margin-top: 50vh;
                opacity: 1;
            }
            #video-effect-wrapper .text:last-child {
                /*margin-bottom: 100vh;*/
                margin-bottom: 50vh;
            }
            #video-effect-wrapper #text-display {
                display: block;
                width: 100%;
                height: 225px;
                position: fixed;
                top: 50%;
                transform: translate(0, -50%);
                z-index: -1;
                
                /*
                background-color: red;
                */
            }

JavaScript

//Get video element
let video = $("#video-effect-wrapper video").get(0);
video.pause();

let topOffset;

//Get video size
$(document).resize(onResize);

function computeVideoSizeAndPosition() {
    const {
        width,
        height
    } = video.getBoundingClientRect();
    const videoPlaceholder = $("#video-placeholder");
    videoPlaceholder.css("width", width);
    videoPlaceholder.css("height", height);
    topOffset = videoPlaceholder.position().top;
}

function updateVideoPosition() {
    if ($(window).scrollTop() >= topOffset) {
        $(video).css("position", "absolute");
        $(video).css("left", "0px");
        $(video).css("top", topOffset);
    } else {
        $(video).css("position", "fixed");
        $(video).css("left", "0px");
        $(video).css("top", "0px");
    }
}

function onResize() {
    computeVideoSizeAndPosition();
    updateVideoPosition();
}

onResize();

//Initialize video effect wrapper
$(document).ready(function () {

    //If .first text-element is set, place it in bottom of
    //text-display
    if ($("#video-effect-wrapper .text.first").length) {
        //Get text-display position properties
        let textDisplay = $("#video-effect-wrapper #text-display");
        let textDisplayPosition = textDisplay.offset().top;
        let textDisplayHeight = textDisplay.height();
        let textDisplayBottom = textDisplayPosition + textDisplayHeight;

        //Get .text.first positions
        let firstText = $("#video-effect-wrapper .text.first");
        let firstTextHeight = firstText.height();
        let startPositionOfFirstText = textDisplayBottom - firstTextHeight + 50;

        //Set start position of .text.first
        firstText.css("margin-top", startPositionOfFirstText);
    }
});

//Code to launch video-effect when user scrolls
$(document).scroll(function () {

    //Calculate amount of pixels there is scrolled in the video-effect-wrapper
    let n = $(window).scrollTop() -...