Landing page help, my video scrolls over

Code Feedback
1

So my header is fixed, but my video scrolls over it. When I scroll past the video to my paragraph I can see my header. I copied some code for my video wrapper and iframe. However, when I take out the position the video disappears completely.

Please give me suggestions on how to made this work.

Thank you.

1 Like
2

Your “about” link does not have opening " for string:

<li><a class="nav-link" href=#about">About</a></li>

It should be like this:

<li><a class="nav-link" href="#about">About</a></li>

As for your problems, you have way to many position properties in your CSS.
Clean those up completely, then assign only one position element to your header that you want to stick on top and make sure rest of the elements that do not need it have no position properties.

3

Right, when I take off position relative or absolute or both the video disappears completely. Which I don’t understand.

The example uses a bony wrapper position of relative. Not sure about that either.

Thank you for your response. I read a little about the z-index, but the video and nar bar are not siblings. So that won’t work.

4

Reason why your video dissapears is because you have this in video wrapper:

.videoWrapper { 
 	position: relative; 
 	padding-bottom: 56.25%; 
	padding-top: 25px;
 	height: 0; 
}

Take a look on “height”. It means that your video container will be 0 pixels in height. That is not gonna make it visible now, will it? :slight_smile:

So get rid of all the position properties and clean up your CSS from all the useless stuff.

Also, z-index should not concern you on this kind of page at all.

5

You are fantastic. I don’t know why I have that there or why I didn’t notice it. I will remove it.

My only excuse is I am doing this on my phone.

6

The reason it is all messy is because you have to much conflicting stuff in your CSS. You need to clean up, maybe start from scratch and take top down approach first.

Maybe read up on this topic where me and someone else already made example of it:

7

I found the example really confusing. And I couldn’t fix the nav bar. Finally got that solved and now part of my video is cut off.
I thought I was trying to simplify it.

I keep plugging away at it though.

Thanks for the help.

8