Streaming live at 10am (PST)

Background video hero + transparent navbar

This was the site I previous had made by way-too-expensive service: Priya Agrawal | San Francisco Luxury Real Estate Agent

I am trying to replicate the hero section with a transparent navbar and a background video. I am having trouble with the following.

  1. I’m hoping to have the background video have the top ~100px cropped out. The reason is that the video shows a lot of sky, which makes the white logo get washed out.
  2. I’d like the background video to auto-size to be as tall as the initial browser window. That way, a person has to scroll to get to the next section.
  3. I’d like to have a slight black film over the video to make it slightly darker so the white logo and text on the navbar is more visible.
  4. I’d like to add a tagline and button over the video, nice and centered.
  5. I’m having trouble making the links on the navbar be completely on the left without margin.

Here’s the current site I’m building using Webflow: Webflow - Priya Agrawal Team's Amazing Project

Any help is much appreciated to accomplish what I’m going for!

Hi @WebDevCali ,

Not sure if this is the best methods, however:

Point 1 - personally I’d do this manually (i.e. in a video editing platform), that way there’s no room for error and messing about with cropping etc.

Point 2 - you may be able use ‘vh’ (view height) or % to ensure the video will always be a percentage of the browser. It might be worthwhile adding a section/div first that is “100 vh” in the height, then dropping the video into this and making it 100% height (so will always fill the section/div)

Point 3 - I would drop a div (called ‘dark-div’ or similar) over the top of my background video, then set the width/height to 100% so it fills the whole area - then in the background area of the div, add an overlay:

Screen Shot 2021-09-14 at 10.46.51 am

Point 4 - then in the above ‘dark-div’ drop a container/div, centre this and add your tagline/button into this and style as required.

Point 5 - do you mean completely on right (logo is currently far left), or next to logo?

Hopefully some of this helps,

1 Like

Very helpful, Dom!

For #5, yes, you are correct - I do mean that I want the menu on the far right, making the navbar more visually balanced.

Hey @domin8tor,

Your points 2 and 3 worked perfectly.

I’m having a bit of trouble following your #4. How do I go about centering and styling it? When I try to add the container in the ‘dark-div’, it ends up either below or above the video.

Preview is here: Webflow - Priya Agrawal Team's Amazing Project

Hey @WebDevCali - no worries, I’ll record a Loom and send it to you now.