DenisKarakchiev
9/8/2017 - 12:58 PM

video as background

video as background

.header {
  &__video-wrap {
      overflow-x : hidden;
      max-width  : 100%;
      display    : block;
      top        : 50px;
      width      : 100vw;
      z-index    : -99;
      margin     : 0 auto;
      position   : absolute;
      left       : 50%;
      transform  : translateX(-50%);
      background : none;
    }
    &__video-overlay {
      position   : absolute;
      width      : 100%;
      height     : 100%;
      background : #fff;
      opacity    : 0.4;
    }
    &__video-bg-v {
      min-width       : 1510px;
      margin          : 0 auto;
      //min-height      : 100%;
      width           : 100%;
      height          : auto;
      background      : url('header__bg.jpg') no-repeat;
      background-size : cover;
      transition      : 1s opacity;
      display         : block;
  }
} 	
.header__video-wrap
    .header__video-overlay
    video.header__video-bg-v(poster="/images/header__bg.jpg" id="bgvid" playsinline autoplay muted loop)
      source(src="/header__video.webm" type="video/webm")
      source(src="/header__video.mp4" type="video/mp4")