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 (http://goo.gl/HcH2cL) instead of an image. Is it possible?

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/