Responsive Video Background Cover

Credit to: https://codepen.io/shshaw/pen/OVGWLG

by Simon Gamester

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="video-container">

  <video autoplay="" loop="" muted="" poster="https://www.skedaddle.com/uk/homepage/videos/skedaddle-standard-2018.jpg">
    <source src="https://www.skedaddle.com/uk/homepage/videos/skedaddle-standard-2018.mp4" type="video/mp4">
    <source src="https://www.skedaddle.com/uk/homepage/videos/skedaddle-standard-2018.webm" type="video/webm">
    <source src="https://www.skedaddle.com/uk/homepage/videos/skedaddle-standard-2018.ogv" type="video/ogg">
  </video>
  
  <div class="flex container">
    <div class="overlay">
      This is an overlay
    </div>
  </div>

</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  min-height: 600px;
}


.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  z-index: 1;
}

.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 
  
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
/*   width: auto;
  height: auto; */
  
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.flex {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.overlay {
  background: #fff;
  color: #000;
  width: 100%;
}