index.html

<!DOCTYPE html>
<html>

<head>
    <title>KIslay</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Slay.BPIT</h1>
    <div class="videocontainer">
	    <video id="video" src="IMG_3294.mp4"></video>    	
    </div>
</body>

</html>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script type="text/javascript">
function scrollVideo() {
    var video = $('#video').get(0),
        videoLength = video.duration,
        scrollPosition = $(document).scrollTop();

    video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;
}

$(window).scroll(function(e) {
    scrollVideo();
});
</script>