How to Create Background Video for Header

 Hey, Now we are going to see how to create background video for header using css. This is very simple and easy coding for html and css. They are used in this coding special tag for <video></video>. video link are insert into this video tag. See the coding




Code:

<div class="wrapper">
   <video autoplay loop muted class="wrapper__video">
      <source src="//vimeo-hp-videos.global.ssl.fastly.net/3/3.mp4">
   </video>
</div>
</div>

Css:


*{
  margin: 0;
  paddding: 0;
}

.wrapper{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.wrapper .wrapper__video{
  object-fit: cover;
  width: 100%;
  height: 100%;
}


Post a Comment

0 Comments