Video Parallax Effect with HTML Background Video

A few days back, I was searching for something on google about parallax and found that many people want to implement a video parallax background effect instead of a photo as a background.

I thought why not explore and find out that does it’s possible? By doing my little research, I am quickly able to found out a solution to add a video and also images as background then create a parallax effect.

When I become to the solution, I was surprised that It can easily be done by using plain HTML and a few lines of CSS.

You may know little about parallax and when we create it, We need the help of two layers. Like, You can mix up content and images layers.

But in our case, We are going to mix up the layers of photos and video, and to add content over the photo layer, We will create an additional div element.

A mixture of both things looks awesome and improves the design of the website. We also add the header and footer to make it like a template.

We are going to use only CSS3 to make the parallax effect in the HTML5 video background. It’s responsive and works well on all kinds of devices.

You can quickly implement, customize, add content and images. Not only this, but you can also add a video to the parallax section.

Define HTML5 Video Background with Parallax effect

We make the video play as background and use the somewhat similar technique we used for fullscreen background images.

We define the wrapper and place the video tag.

<div class="hero-wrapper">
  <div class="hero">
    <figure>
      <video loop="loop" muted="muted" autoplay="autoplay">
        <source src="https://assets.yesstud.io/studioblvd/video/studioblvd_420.mp4"/>
      </video> 
    </figure>
  </div>
</div>

Next, we add a wrapper for parallax and identify different sections.

First, we have navigation where you can specify the order list and insert the links.

After that, you can add as the content section as many as you want. We have a footer as well.

<div class="parallax-wraper">
    <div class="navigation">
        .....
    </div>
    <div class="parallax">
        <div class="content">
          .....  
        </div>
    </div>
    <div class="footer">
       ......
    </div>
</div>

CSS Styles

After defining the 100 percent width and height of the HTML and body tag, we also do the same with the video.

You may know the way of making the fullscreen background image, so we are going to do the same for the video to make it fullscreen.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
figure {
  margin: 0;
  position: relative;
}
video {
  width: 100%;
  max-width: 100%;
}
.hero-wrapper {
  position: fixed;
  bottom: 0;
  right: 0;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -9999;
}

For parallax sections, we make the wrapper to 100vh and set the overflow-y scroll.

.parallax-wraper {
  height: 100vh;
  overflow-y: scroll;
  width: 100%;
}

Each parallax section will have a fixed background height as per our needs.

.parallax-wraper .parallax {
    background-attachment: fixed;
    background-size: 120% auto;
    box-sizing: border-box;
    
    font-size: 3em;
    height: 65vh;
    margin: 6em 0;
    overflow: hidden;
    vertical-align: middle;
}

For adding background images for a parallax section, we are going to use:nth-child() and set the background image.

.parallax-wraper .parallax:nth-child(2) {
  background-image: url("https://cdn.pixabay.com/photo/2016/10/21/14/46/norway-1758183_960_720.jpg");
}

We also include a few more lines of CSS code, and you can find them in the demo and download section.

Let’s have a look at the demo above & enjoy it! Don’t forget to leave your thoughts about it.