Form with Video Background

Publish Your Code

@import url(https://fonts.googleapis.com/css?family=Inter:300);
body{
  padding:0;
  margin:0;
  font-family: 'Inter';
}
.vid-container{
  position:relative;
  height:100vh;
  overflow:hidden;
}
.bgvid.back {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
}
.inner {
  position: absolute;
}
.inner-container{
  width:400px;
  height:400px;
  position:absolute;
  top:calc(50vh - 200px);
  left:calc(50vw - 200px);
  overflow:hidden;
  border-radius: 7px;
}
.box{
  position:absolute;
  height:100%;
  width:100%;
  font-family:'Inter';
  color:#fff;
  background:rgba(0, 0, 0, 28%);
  padding:30px 0px;
  border-radius: 7px;
}
.box h1{
  text-align:center;
  margin:30px 0;
  font-size:30px;
}
.box input{
  display:block;
  width:300px;
  margin:20px auto;
  padding:15px;
  background:rgba(0,0,0,0.2);
  color:#fff;
  border-radius: 7px;
  border:0;
}
input::placeholder {
  color: rgb(182, 171, 163);
}
.signup{
  color: rgb(182, 171, 163)!important;
}
.box input:focus,.box input:active,.box button:focus,.box button:active{
  outline:none;
}
.box button{
  background:#2d2f36;
  border:0;
  color:#fff;
  padding:10px;
  font-size:20px;
  width:330px;
  margin:20px auto;
  display:block;
  cursor:pointer;
  border-radius: 7px;
}
.box button:active{
  background:#000000;
}
.box p{
  font-size:14px;
  text-align:center;
}
.box p span{
  cursor:pointer;
  color:#666;
}

@media screen and (max-width: 986px) {
  .bgvid{
height: 100px!important;
  }
}

@media screen and (min-width: 986px) {
  .bgvid.back {
width: 100%;
  }
}

Form with Video Background

Recommended

Coin Transfer tiktok Form with Payment Selection

Animated Login Form HTML CSS

Modern Login Panel with Animated Border and Password Reset from TheDoc

index.html

styles.css

main.js