Add overlay to a video background

Hi, newbie webflow user. I want to have a video background as a landing page. I can add the video but I can’t work out how to add an overlay element on top of it.

Please note, I’m adding video by just using a video url from wistia,

I’ve watched the tutorials on adding a background image and then overlays but I can relate to this to use video instead. It clearly can be done as this example shows: https://preview.webflow.com/preview/videotag?preview=04bdf406fe920962dc19992fec7fb38b

Here’s a link to the project: https://preview.webflow.com/preview/jobviddy?preview=ab85f757bde4764a55106472ff82d9d7

All help appreciated.

Hi,

So in fact you need to put one element on top of another. So in CSS we’ll say that this overlay element has to be “position:absolute”.

Basically, you create an element (div, section…) and you put inside the element containing your video background.

Now, also put inside the element you want overlay the video. It should appear underneath.

Select the first element, the one hosting both the video background and the overlay element, and give it the property “position:relative”. It has no effect but this is needed.

Then select the element containing all the overlay content and give it “position:absolute”, then click on one of the positioning buttons, and adjust possibly with values. You overlay content should be on top of the video now.

http://vincent.polenordstudio.fr/snap/ov6d9.jpg

1 Like

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