<div class="video-container">
  <video autoplay loop muted>
    <source src="https://coverr.co/s3/mp4/Bokeh-Tov.mp4" type="video/mp4" />
  </video>
  
  <div class="overlay">
    <div class="inner">
      <div class="teaser">
        <h1><span>genial</span>.digital</h1>
        <h2>digitale Kommunikation und digitale Medien</h2>
      </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');

.video-container {
  position: fixed;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  
  video {
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .overlay {
    font-family: 'Open Sans', sans-serif;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: table;
    background: rgba(3,254,127,0.3);
    
    .inner {
      display: table-cell;
      vertical-align: middle;
      padding-left: 100px;
      
      .teaser {
        background: #03fe7f;
        width: 100%;
        max-width: 700px;
        padding: 30px 30px 20px;
        box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.8);
      }
    }
    
    h1, h2 {
      color: #000;
      line-height: 1;
    }
    
    h1 {
      font-size: 80px;
      
      span {
        color: #fff;
      }
    }
    
    h2 {
      font-size: 21px;
    }
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.