Video as background parallax CSS

Question

I'm more backend guy than frontend, so if you consider my question as dummy, sorry for that, but I couldn't find answer :)

My aim is to have background video with parallax using CSS. In general I did manage to do that, but result is not good enough. Because of some reason, video which is in background is under all sections, instead of being in just one section where it supposed to be...

HTML:

<div class="fullScreenPhoto"></div>
<div class="video-container">
  <video autoplay poster="" class="video-parallax" loop muted>
    <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/webm">
    <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/mp4">
  </video>
</div>

<div class="fullScreenPhoto2"></div>

<div class="fullScreenPhoto3"></div>

CSS:

body{
  margin: 0;
  padding:0
}

.fullScreenPhoto{
  width: 100%;
  margin:0;
  height:300px;
  background-color: red;
}

.fullScreenPhoto2{
  width: 100%;
  height:300px;
    margin:0;
  background-color: green;
}
.fullScreenPhoto3{
  width: 100%;
    margin:0;
  height:300px;
  background-color: yellow;
}

video {
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

.video-container {
    height: 600px;
}

.video-parallax {
    -webkit-transition-position: fixed;
    position: fixed;
}

Here you can fiddle: Fiddle

where I've duplicated my issue. If you will hide one section, or change z-index for higher, you are able to see, that video is all over the page...

BTW. I know about plugin jQuery -> https://github.com/linnett/backgroundVideo, but I would like to use just CSS.

im not seeing anything in your fiddle that corresponds to parrallax? — Matthew Brent, Jan 15 '17 at 23:54

score 4 · Answer 1 · answered Aug 29 '18 at 19:09

You can easily do this as you do with image parallax.

The HTML:

<div class="ParallaxVideo">
  <video autoplay muted loop>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
  <h1>Video Background</h1>
</div>

The CSS

.ParallaxVideo{ 
    height: 300px;
    padding-bottom: 50px;
    padding-top: 50px; 
}
.ParallaxVideo video{ 
    min-width: 100%;
    position: fixed;
    top:0;
    z-index: -999;
}
.ParallaxVideo h1 {
  color: #fff;
  font-size: 76px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

You can also take a look this tutorial for more details:

https://codeconvey.com/video-parallax-background-using-css3/

Here is demo version:

http://codeconvey.com/Tutorials/VideoParallaxBackground/

score 1 · Answer 2 · answered Jan 15 '17 at 23:54

1

You need to set a css height for the video element, or on the element itself like <video height="400">. Updated Fiddle.

answered Jan 15 '17 at 23:54

Cooleronie

1,225
1
9
9

score 1 · Accepted Answer · answered Jan 15 '17 at 23:58

1

If you want video to be background only for this one div then you couldn't have parallax effect, because then you need remove position: fixed for .video-parallax (so all styles for this class as I see) and change styles for video to that:

video {
    margin:0 auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}

answered Jan 15 '17 at 23:58

Joint

1,218
1
12
18

My aim to to have parallax effect, so based on what you wrote, it's not possible to make parallax effect in this way using CSS? I have a LP with many images, and video appear before image is loaded.. – dmoczydlowski Jan 16 '17 at 08:53
If you want to have parallax effect for this video, then it must cover more than just this one div (even the whole viewport) - it avoids from showing white space around video when you scroll the page. – Joint Jan 16 '17 at 10:05

score 1 · Answer 4 · 2019-09-08T19:51:25.350

For this purpose I am using Materialize CSS. It is straightforward. We want a video as background parallax CSS.

HTML WITH MATERIALIZE CSS

 <style>
 #anyvideo{
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 10%;
        min-height: 100%;
       }
</style>

<div class="video-container parallax-container">
    <video autoplay muted loop id="anyvideo">
        <source src="somevideo.mp4" type="video/mp4">
    </video>
</div>

We can also make our video responsive i.e. adjust to screen size accordingly.

<div class="video-container parallax-container">
    <video autoplay muted loop id="anyvideo" class="responsive-video">
        <source src="somevideo.mp4" type="video/mp4">
    </video>
</div>

In the above code only the class="responsive-video" has been added and that makes the video responsive.

Video as background parallax CSS

4 Answers4