html - Getting background image to scroll -

i'm running background video when visitors enter landing page. scroll down page video stays in place change video scrolls out well. i'm not sure how that.

here css:

video#bgvid {      position: fixed;     top: 50%;     left: 50%;     min-width: 100%;     min-height: 100%;     width: auto;     height: auto;     z-index: -100;     -ms-transform: translatex(-50%) translatey(-50%);     -moz-transform: translatex(-50%) translatey(-50%);     -webkit-transform: translatex(-50%) translatey(-50%);     transform: translatex(-50%) translatey(-50%);     background: url() no-repeat;     background-size: cover;  }  .video-container {     min-height: 100vh; } .video-container-bg {     padding-top: 45vh;     color: #fff; } 

and here html uses it:

<div class="video-container">     <div class="video-container-bg">         <video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid">                 <source src="{{page.video.url}}" type="video/mp4">         </video>         <div class="container">             <div class="row">                 <div class="col-sm-12 col-md-8">                     <div class="animation-element bounce-up">                         <h1 class="page-title">{{page.page_title}}</h1>                         <p class="strapeline">{{page.strapline}}</p>                         <a class="butt" href="#about-us">learn more</a>                     </div>                 </div>             </div>         </div>     </div> </div> 

make position:relative instead of fixed

video#bgvid {       position: relative;      top: 50%;      left: 50%;      min-width: 100%;      min-height: 100%;      width: auto;      height: auto;      z-index: -100;      -ms-transform: translatex(-50%) translatey(-50%);      -moz-transform: translatex(-50%) translatey(-50%);      -webkit-transform: translatex(-50%) translatey(-50%);      transform: translatex(-50%) translatey(-50%);      background: url() no-repeat;      background-size: cover;   }    .video-container {      min-height: 100vh;  }  .video-container-bg {      padding-top: 45vh;      color: #fff;  }

<div class="video-container">      <div class="video-container-bg">          <video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid">                  <source src="{{page.video.url}}" type="video/mp4">          </video>          <div class="container">              <div class="row">                  <div class="col-sm-12 col-md-8">                      <div class="animation-element bounce-up">                          <h1 class="page-title">{{page.page_title}}</h1>                          <p class="strapeline">{{page.strapline}}</p>                          <a class="butt" href="#about-us">learn more</a>                      </div>                  </div>              </div>          </div>      </div>  </div>  <div class="video-container">      <div class="video-container-bg">          <video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid">                  <source src="{{page.video.url}}" type="video/mp4">          </video>          <div class="container">              <div class="row">                  <div class="col-sm-12 col-md-8">                      <div class="animation-element bounce-up">                          <h1 class="page-title">{{page.page_title}}</h1>                          <p class="strapeline">{{page.strapline}}</p>                          <a class="butt" href="#about-us">learn more</a>                      </div>                  </div>              </div>          </div>      </div>  </div>  <div class="video-container">      <div class="video-container-bg">          <video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid">                  <source src="{{page.video.url}}" type="video/mp4">          </video>          <div class="container">              <div class="row">                  <div class="col-sm-12 col-md-8">                      <div class="animation-element bounce-up">                          <h1 class="page-title">{{page.page_title}}</h1>                          <p class="strapeline">{{page.strapline}}</p>                          <a class="butt" href="#about-us">learn more</a>                      </div>                  </div>              </div>          </div>      </div>  </div>