Video -BG Vrs. 02

by davidxmartins

HTML

<div class="video-overlay">
  <video autoplay muted loop poster="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Sample_Floorplan.jpg/640px-Sample_Floorplan.jpg">
    <source src="https://homemverde.pt/videobg-01.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <div class="header">
    <h1>Blueberry Cheesecake</h1>
    <a>Recipe here</a>
  </div>
</div>


<div style="height: 100vh; background: white;">

</div>

CSS

html, body {
  margin: 0;
}

video {
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
}

.video-overlay {
  width: 100%;
  height: 100vh;
  background: rgba(14, 143, 118, 0.7);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;

}

.header{
  color: white;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
  padding: 0 3vw;
}

a {
  padding: 20px 40px;
  background: #aaa;
  color: white;
}