Video Parallax

HTML

<header data-parallax="true" data-speed="2">
    <p>
      Header
    </p> 
    
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
        <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/mp4" />
    </video>
</header>

<main>
  <p>Content, content, content.</p>
  <p>Content, content, content.</p>
  <p>Content, content, content.</p>
</main>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
  background: #333;
  color: #fff;
}

#video_background {
  position: absolute;
  bottom: 0px;
  right: 0px;
  top: 0px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  overflow: hidden;
}

header {
  min-height: 100%;
  position: relative;
}

header p {
    z-index: 10;
}

main {
  padding: 50px;
  background: #333;
  margin: 0;
}

JavaScript

$('[data-parallax]').each(function(){
  var $this = $(this),
      $window = $(window);

  $window.scroll(function() {
    var y = ($window.scrollTop() / $this.data('speed'));
    var moveTop = y + 'px';
    console.log(moveTop);
   
    $this.find('#video_background').css('top', moveTop);
  }); 
});