<div id="video-container">
  <div class="video-overlay"></div>
  <div class="video-content">
    <div class="inner">
      <h1>Full screen video background</h1>
    <button>Discover</button>
    </div>
  </div>
  <video autoplay loop src="https://static.videezy.com/system/resources/previews/000/002/648/original/kuala-lumpur-timelapse.mp4"></video>
</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); 
body {
  font-family: Montserrat;
}
* { padding: 0; margin: 0 }
body, html {
  height: 100%;
  min-height: 100%;
}

#video-container  {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#video-container video,
.video-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

#video-container .video-overlay {
  z-index: 9999;
  background: rgba(0,0,0,.5);
}

#video-container .video-content {
  z-index: 99999;
  position: absolute;
  height: 100%;
  width: 100%;
}

#video-container .video-content .inner {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}

#video-container .video-content .inner h1 {
  color: white;
  margin: 20px 0;
  font-size: 3em;
}

#video-container .video-content .inner button {
  background: #03A9F4;
  border: none;
  color: white;
  padding: 20px 30px;
  border-radius: 5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.