Creating Video Parallax Effect with HTML Background Video

video parallax effect

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

I thought why not explore and found out that does its 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 the 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 additional div element.

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

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

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

Build HTML5 Video Background with Parallax effect

We make the video to 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>

The 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 need.

.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! Don’t forget to leave your thoughts about it.

Code ExamplesYou May Also Like