Parallax scroll effect with video

Question

I'm learning about the parallax effects and I'm trying to display a video in background instead of an image.

So, I created a good effect using a background image.

This is my jQuery code:

$('[data-parallax]').each(function(){
 var $this = $(this),
 $window = $(window);
 $window.scroll(function() {
 var y = -($window.scrollTop() / $this.data('speed')),
 background = '50% '+ y + 'px';
 $this.css('background-position', background);
 }); 
});

And my CSS:

[data-parallax] {
 background-attachment: fixed;
 background-color: #fff;
 background-image: url('http://lorempixel.com/720/480');
 background-position: 50% 0;
 background-repeat: no-repeat;
 background-size: cover;
 min-height: 100%;
 position: relative;
}

Example: http://jsfiddle.net/7a2ky/show/
Code: http://jsfiddle.net/7a2ky/

I'd like to do the same effect but using a video instead of an image. Is it possible?

• Nevin: Have you tried using an embedded link for your video?
• Caio Tarifa: @NevinMadhukarK Yes, I've tried to "simulate" a background with HTML5 video element. But didn't work.
• Nevin: I am not sure whether you got what i am saying. An embedded link looks like this :<iframe width="560" height="315" src="//www.youtube.com/embed/BIz02qY5BRA" frameborder="0" allowfullscreen></iframe>
• Nevin: syddev.com/jquery.videoBG Don't know whether this will help... Do check it out too.
• Caio Tarifa: @NevinMadhukarK Thanks for these tips, but unfortunately I still don't know how I can combine this plugin with the parallax scroll effect.

Answer 1

You cant change a background image into a video in CSS, you need to trick the browser with the zIndex (or use a gif file instead of the video) :

$video.css({"height":"100%",
 position:'absolute',
 top:0,left:0,zIndex:10
 });

http://jsfiddle.net/camus/7a2ky/9/show/

• mpm: well it works the video is in the background as you wanted.I did not touch your parallax effect because it didnt work on my computer.
• Caio Tarifa: I can't understand how the Parallax effect doesn't work on your computer. But thank you for your help, unfortunately this is far from what I need.

Answer 2

js

$(window).scroll(function ()
{
 var yPos=-($(window).scrollTop() / 6);
 if($(window).scrollTop()>100)
 {
 document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
 }
 if($(window).scrollTop()<100)
 {
 document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
 }
});

css

#div1_wrapper
{
 background:url("images/parallax1.jpg") no-repeat;
 background-attachment:fixed;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 width:100%;
}
#div2_wrapper
{
 background:url("images/parallax2.jpg") no-repeat;
 background-attachment:fixed;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 width:100%;
}

if you need to view complete tutorial with demo http://talkerscode.com/webtricks/simple-parallax-effect-on-scrolling-using-jquery-and-css.php