Ninetiger blog

-- my reminder

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

Comments:
by Beartw, 2022年5月31日 10:43:02 PM oral amoxil 250mg - azithromycin 500mg cost viagra 150mg
by Vhyprr, 2022年5月30日 1:29:20 PM oral deltasone 10mg - red ed pill accutane 40mg ca
by Cfcmsh, 2022年5月29日 4:23:29 AM buy cialis 20mg sale - tadalafil without a doctor's prescription purchase provigil online cheap
by Egusvd, 2022年5月27日 8:00:01 AM buy doxycycline 200mg sale - doxycycline 100mg uk tadalafil 5mg drug
by Ctwcgj, 2022年5月25日 9:13:14 PM stromectol tablets for humans for sale - ivermectin 12mg pills for humans levitra 10mg canada
by Knqaxr, 2022年5月24日 10:45:32 AM order amoxicillin 250mg pill - zithromax price levitra for sale

Back to top