Cacher is the code snippet organizer for pro developers

<section class="hero--video">
  
    <div class="wrapper">
        <div class="item">
          <div class="box">
            <h1 class="title">Your lead title here</h1>
            <p>Subtext</p>
          </div>
        </div>
    </div>
    
    <!-- iFrame loads faster -->
    <iframe src="https://player.vimeo.com/video/284366312?background=1" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    
</section>

section.hero--video {
    height: 500px;
    position: relative;
    overflow-y: hidden;
    color: white;
    &:before {
        content: '';
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,0.75);
    }
    .wrapper {
        position: relative;
        z-index: 2;
    }
    video, iframe {
        position: absolute;
        min-height: 100%;
        min-width: 100%;
        top: -200px;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -100;
    }
}