Video Parallax Background Effect with Pure CSS & HTML

Did you try out image parallax effect before? But what do you think about adding video parallax background? Yep, it’s quite possible with the only CSS and HTML.

You don’t need Javascript or Jquery for that and can achieve the cool looking effect with only CSS animations.

I personally love to do things in CSS only instead of using too much Javascript because it doesn’t affect your site loading speed.

But you may think differently or have different requirements, If so then you can check out Javascript solution of creating video parallax scrolling which builds with Jarallax.js Plugin to create unlimited parallax effects.

The solution of adding the videos as parallax with the only CSS3 is a quite easy and simple task. All you need to use almost the same technique which we will use for photo parallax.

How to Create Video Parallax Background Effect with CSS & HTML

Let’s simply download the plugin and add the required files in the head.

<link rel="stylesheet" type="text/css" href="videoparallax.css" />

The next thing is to define the HTML and the HTML is also quite simple and easy to understand. There are separate HTML with the unique class for photo, video and content parallax effect.

If you want to add video parallax effect, you need to add the following HTML.

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

To add the photo, you need to define the class ParallaxImage

<div class="ParallaxImage bg1">
  <div class="container">
        content goes here
  </div>
</div>

Similar to the photo section, The content section is also quite simple and easy. All you need to define the class ParallaxContent.

<div class="ParallaxContent">
  <div class="container">
    <div class="headlines">
        <h3>Add some heading</h3>
    </div>
    <p>Description of section goes here.</p>
    </div>
</div>

Now Let’s have a look some important styles.

.ParallaxImage {
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 50px;
  padding-top: 50px;
}

.ParallaxContent {
  background: none repeat scroll 0 0 #2581e8;
  padding: 42px 0;
  color:#FFF;	
} 

.ParallaxVideo{ 
    height: 300px;
    padding-bottom: 50px;
    padding-top: 50px; 
}
.ParallaxVideo video{ 
    min-width: 100%;
    position: fixed;
    top:0;
    z-index: -999;
}

That’s it. Hope it’s easy for you to implement. Download the plugin and find out the complete source. This solution is fully responsive and works well with different browsers.