Parallax Video section

HTML & CSS
1

I’m trying to create some Parallax video sections, but the video is covering the entire page, rather than being bound to just the ParallaxVideo class section. I do not want to have to make the other sections have a background color to mask the rest of the page. How can I have the video show just in the specific sections with ParallaxVideo as the class?

here is a codepen

2

position:fixed anchors relative to the top of the page, and you have top set to 0, hence why it’s covers the whole page.

If you don’t want it to cover the entire height, set the top: 0 to something else, for example top:33vh, which will start the video about 1/3 from the top of the viewport.

image
image1436×429 62.4 KB

1 Like
3

Thanks Dave, but is there a way to have the video positioned inside it’s parent div and not go outside of it? just like you can cover a div with a background image?

4

???

I’m not sure what you’re asking. If you just want the video to sit in the div, just remove the position:fixed; and top: 0; but then it’s not “parallax”

5

Unfortunately you can’t do that for videos as they are not in the background.

There are some demos around that have a similar effect but you may have to search around for something suitable.

1 Like
6

What about If I get rid of the parallax effect and just want the video as a background for that specific section? Could it be created as a background? I commented out both of these:

position: fixed; 
top:0;

but then the video is displayed as a block elements and pushes the text in the section below.

7

You would need position relative on the section then absolutely place the video to the top left right and bottom so that it covers the area. You’d probably need to use object-fit:cover to maintain aspect ratio but I’d need to check if that works for video’s yet.

I’ll have a look when I get back to my computer tomorrow :).

1 Like
8

In your codepen you’d need to do this.

.ParallaxVideo {
  /*   height: 300px; */
  padding: 200px 0px;
  overflow: hidden;
  position: relative;
}
.ParallaxVideo video {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -9999;
  object-fit:cover;
  width:100%;
  height:100%;
}

Of course the video just scrolls away with the div and is not parallax.

9

Just for fun I (quickly) changed one of my fixed background demos to hold a video effect instead.

It’s not quite the same and requires full page elements for best effect but may be of interest. I’ve only added the (same) video to every other section.

2 Likes
11

thanks Paul

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.