CODEWITHSUNDEEP
htmlcss
Thomas Ray
Thomas Ray

Reputation: 103

Background video Parallax effect without JS

With images you only have to use:

background-attachment: fixed;

Is there a way to achieve the parallax effect with videos without the use of JS?

Link to my example site for reference: https://captain-stoves-76350.netlify.com/

Upvotes: 0

Views: 1333

Answers (1)

Tom Harris
Tom Harris

Reputation: 243

Yes,

Set your video div to:

position: fixed;
top: 0;

Then add a wrapper div around the rest of your content and do:

position: relative;
z-index: 1;

Then add padding to your body dependent on the height of your video:

padding-top: 500px;

Note: this will only work if your video is at the top of the page, but you can play around with the top: x; value if you need it further down, just make sure that the rest of your content is inside your wrapper and the z-index is set higher than your video div.

Upvotes: 2

Related Questions