<section>
  <div class="overlay"></div>
  <video src="https://s3.amazonaws.com/akamai.netstorage/HD_downloads/Orion_SM.mp4" autoplay loop muted></video>
  <div>
    <h1>VIDEO ON BACKGROUND</h1>
    <p>The <em>object-fit</em> CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width (from <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/object-fit">MDN</a>).</p>
    <button>BUTTON</button>
  </div>
</section>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:600,800|Droid+Serif:400,400italic');

*
  font-family inherit
  box-sizing border-box
  
body
  margin 0
  font-family 'Open Sans'
  
section
  display flex
  justify-content center
  align-items center
  width 100%
  height 100vh
  overflow hidden
  
video
  position absolute
  top 0
  left 0
  display block
  width 100%
  height 100%
  object-fit cover
  
div
  z-index 1
  width 40rem
  text-align center
  text-shadow 1px 1px 1px #000
  color #fefefe
  
a
  color #e55
  
h1
  line-height 1.125
  margin 0
  font-family 'Open Sans'
  font-size 4rem
  font-weight 800
  
p
  line-height 1.25
  margin 1rem 0
  font-family 'Droid Serif' 
  
button 
  cursor pointer
  padding 0.5rem
  border 1px solid transparent
  border-radius 0.25rem
  color #fefefe
  background-color #e55
  font-weight 600
  transition .2s ease
  
  &:hover
    background-color darken(#e55, 10%)
  
.overlay
  position absolute
  z-index 1
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, 0.5)