How to embed video as background and have it fixed when scrolling down the page?

HTML-CSS
1

Hey guys,
I am practicing my css skills but I got stuck trying to replicate a template for wix,
i can’t figure out how to go about it. Here is the effect I want to achieve

[https://www.wix.com/website-template/view/html/1905?siteId=bf6aeb61-6d03-4b41-9d17-41510aea2db8&metaSiteId=a82e916a-5f83-4c62-ad07-53c98a45a9e6&originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates&tpClick=view_button](https://template to replicate)

My questions are: Where can I host a video, how can I embed the video as background and how can I have the fixed style when I scroll down?

What I have so far: https://codepen.io/flickscode/pen/wvWgNze

Thank you very much.

I am happy with the navbar but I can’t figure out how to have a video as the background that only fills 100% of the viewport. The video I was

2

It’s quite basic to stick element to the screen and make it appear behind siblings. Parallax effect might be a bit more challenging.

Enjoy: https://codepen.io/snigo/pen/rNLjPoX

1 Like
3

How did you grab the video link? That’s the effect I want. It looks amazing. Now i gotta read your code to understand it.

4

You can inspect elements from the template with dev tools - there is a video element with src attribute.

1 Like