Parallax

HTML

<header data-parallax="true" data-speed="5">
  <video src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" loop autoplay></video>
    Header
</header>

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

CSS

html, body { height: 100%; }

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

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

[data-parallax] video {
    position: absolute;
    width: 100%;
    heigth: 100%;
    -webkit-transform: translate(0px,0px);
    z-index: -1;
}

main {
  padding: 50px;
}

JavaScript

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

  $window.scroll(function() {
    var y = -($window.scrollTop() / $this.data('speed')),
        background = 'translate(0px,'+ y + 'px)';

    $this.find('video').css({
     transform: background,
     MozTransform: background,
     WebkitTransform: background,
     msTransform: background
    });
  }); 
});