MySQL & PHP References: Video Background Header Plain CSS

Thursday, January 23, 2020

Video Background Header Plain CSS - SOLVED

This is Plain CSS Video Background Header optimized for Desktop & Mobile Phone working great. Enjoy!!!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<style type="text/css">
*{
  margin: 0;
  paddding: 0;
}
.wrapper{
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.wrapper .wrapper__video{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#xoverlay { text-align: center; margin: 20px 40px; position: absolute; z-index: 214; }
#logo1 { width: 90%; }
 </style>
</head>
<body>
<header>
<div class="wrapper">
<div id="xoverlay">
 <img src="images/our-logo.png" id="logo1">
</div>
   <video autoplay loop muted class="wrapper__video">
      <source src="images/bg-video.mp4">
   </video>
</div>
</header>
</body>
</html>

MySQL & PHP References

Search This Blog

Thursday, January 23, 2020

Video Background Header Plain CSS - SOLVED

No comments:

Post a Comment

content-wide advt