Background video with parallax effect

There is a plugin that does exactly what you need here: https://github.com/linnett/backgroundVideo


I would create the div element with the HTML5 video first, then create the parallax scrolling. Adding the HTML5 video and making it full-width can be as simple as:

<video id="myVideo" controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   Your browser does not support the video element.
</video>
<script>
   document.getElementById("myVideo").width=document.body.offsetWidth;
</script>

For the parallax, you will need to implement that separately. The div element with the HTML5 video will just be a component of the page, just like any other layer or content section.

If you need some tutorials on creating parallax websites, my company created a list of the parallax websites available (sorted by technology: jQuery, stellar.js, and skrollr.js). http://potentpages.com/parallax-tutorials/

The Mozilla reference for HTML5 video: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video