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 </span>
<span>musician </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+''});
}