Parallax Background Video

Question

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

Click here to see an example.

I tried several popular plugins that I found on the Internet, for example:

BigVideo.js

Ytpayer

jquery.videoBG

But none of them do what I'm looking for, or maybe they do it, but I just could not understand :(

Thanks everyone!

Answer 1

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

Answer 2

First, I would create a div element with HTML5 video, and then create a parallax scroll. Adding HTML5 video and creating its 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 parallax, you will need to implement this separately. The div element with the HTML5 video will be just a component of the page, like any other section or section of content.

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

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

Answer 3

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

Check out the 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> 

Answer 4

If you are also interested in controlling the timeline of the video based on the scroll position, you can use https://www.panomoments.com/guide#build