Limit height of header background video - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Limit height of header background video

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

header{<!--  w w w.jav  a2  s  .c  o m-->
   padding-top: 100px;
   padding-bottom: 30px;
   margin-top: 0px;
   min-height: 400px;
   text-align: center;
   height: calc(100% - 257px);
   justify-content: center;
   overflow: hidden;
}
#videoBackground {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: -10;
}
#videoBackgroundVideo {
   position: absolute;
   top: 50%;
   left: 50%;
   width: auto;
   height: auto;
   min-width: 100%;
   /* min-height: 100%; */
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}


      </style> 
 </head> 
 <body> 
  <header id="home"> 
   <div id="videoBackground"> 
    <video loop="loop" playsinline="playsinline" autoplay="autoplay" muted poster="https://www.java2s.com/style/demo/Safari.png" id="videoBackgroundVideo"> 
     <source type="video/mp4" src="your .mp4"> 
    </video> 
   </div> 
   <h1> This is a title</h1> 
   <h2> This is a subtitle</h2> 
   <div id="welcomeMessage"> 
    <h3> Welcome at <span>My Page</span> </h3> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" id="homeLogoWhite" style="border-style:none;"> 
   </div> 
  </header>  
 </body>
</html>

Related Tutorials