How to make full video background with scroll HTML page

The trick is to use <section> and give a height of 100%; Then put the video into the <section>

HTML:

        <section id="video-block" class="fullscreen">
            <div style="width:initial;" >
                <video autoplay loop id="video-background" muted poster="thumbnail.jpg">
                    <source src="img/343376220.mp4" >
                    <!--            <source src="yourvideo.webm">-->
                </video>
            </div>
            <div class="container v-align-transform" >
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1" style="z-index:200;">
                        <h1>Back the next top
                            <div class="slidingVertical">
                                <span>artist&nbsp</span>
                                <span>musician&nbsp</span>
                            </div>       
                        </h1>
                        <p class="lead mb40 mb-xs-24">
                            Whether you are a fan supporting your favorite creators.
                        </p>
                      
                    </div>
                </div>
            </div>
        </section>

CSS:

.fullscreen{height:100vh}
#video-background {
/*  making the video fullscreen  */
  position: absolute;
  display: block;  
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: initial;   
  height: auto;  
  z-index: -99;
  margin: 0 auto;
  object-fit: cover;
  padding: 0;
    opacity: 1;
}

js:

$(function() {
    initVideoBg();
});

//Adjust video height and width
var initVideoBg = function(){
    resizeVideoBg();
    $(window).resize(resizeVideoBg()); 
    
}
var resizeVideoBg = function(){
    var w = $(window).width(), h = $(window).height()  ;
    $('#video-block video').css({height: ''+h+'',width: ''+w+''});
}