Background video with parallax effect

Question

Is there a way to place a background video in a div container with a parallax effect? What I'm looking for is something similar to this template:

Click here to see example

I've tried a few popular plugins I've found on the internet such as:

BigVideo.js

YTPlayer

jquery.videoBG

But none of them do what I'm looking for or maybe they do but I just couldn't figure it out :(

Thank you all!!

Solution 1

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

Solution 2

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

Solution 3

Just in case you are still looking for a solution using YTPlayer. Set the containment:'self' or containment:'#elementID' in the HTML constructor where #elementID is the ID of your div,section or parallax section where you want the video to play in background.

Refer to YTPlayer Wiki page here.

<div id="P1" class="player" 
     data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'self',startAt:50,mute:false,autoPlay:false,loop:false,opacity:.8}">
</div>