I am trying to replicate the hero section with a transparent navbar and a background video. I am having trouble with the following.
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.
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.
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.
I’d like to add a tagline and button over the video, nice and centered.
I’m having trouble making the links on the navbar be completely on the left without margin.
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:
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?
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.
