How To Make Responsive Background Video Web Page

on

Video Is Also There After The Html Code Below

Css Codes
body{
 margin: 0;
 padding: 0;
 font-family: sans-serif;
}
.myvideo{
 position: fixed;
 left: 0;
 top: 0;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 object-fit: cover;
}
.head{
 position: absolute;
 top: 30%;
 left: 40%;
 transform: translate(-50%,-50%);
}
h1{
 font-size: 3em;
}
.head h1,h2{
 color: rgba(9,90,140,.7);
 letter-spacing: 5px;
}
.mypage{
 position: absolute;
 top: 100%;
 background: rgba(9,90,140,.6);
 width: calc(100% - 40px);
 height: 100%;
 color: rgba(255,255,255,.7);
 padding: 20px;
 font-size: 20px;
}
@media screen and (max-width: 945px)
{
 .myvideo{
  display: none;
 }
 body{
  background: url('sea.png');
  background-size: auto;
  background-repeat: no-repeat;
 }
 .mypage{
 position: absolute;
 top: 100%;
 background: #fff;
 height: 100%;
 color: #000;
 width: calc(100% - 40px);
 padding: 20px;
} 
}
Html Codes

Comments

Post a Comment