Video as background parallax CSS - html

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.

Answer 1

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/

Answer 2

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;
}

Answer 3

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

Answer 4

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.