Help with "video" & "navbar" Parts in the Landing page Problem

1

Hello,

I am currently working on the Product Landing Page project and I am having 2 problems. The first one is about the video. I tried the “iFrame” method and I didn’t get anywhere, but with a little work with the “video” method I got the viewing area of the video to show (I was able top do this by rearranging the source types to type = “video/mp4” as my primary and type = “video/oog” as my secondary, I also had to get rid of the type= “video/webm” all together. Another thing that I found is that nothing shows up without the controls label in the “video” area. ). My problem with the video now is that I can’t play the video. The src code is correct (I tested the link on a new tab) and everything else seems to be correct, but it never will play.

The second thing that I am having trouble with is the position of the navbar. My navbar is fixed about 5px off the top of the screen. (it’s also was covering the top part of the , I’m not sure if it’s supposed to do that or not so I thought I would add it in her. I fixed it with padding) I have tried multiple ways of fixing this problem, with positioning, z-axis, and padding/margins, but nothing has worked yet so far.

If you could please help me with these problems that would be great.

Here’s the link to the page:

2

Hi,

So for your first problem I’m not too experienced with videos.

Your second problem I can fix. Basically reset all the initial margin and padding to 0, and also you have some code in your header that is messing your navigation bar up. Here is some code I tweaked a bit and it works:

* {
/* resets browser margin and padding */
  margin: 0;
  padding:0;
}

#header{
  background-color: grey; 
  position: fixed;
/* need top and left to be 0 so it is fixed to the left top corner and full width to 100 %*/
  top: 0;
  left: 0;
  width: 100%;
}
2 Likes
3

Thank you for the help with the navbar portion of the problem. I added those things to the page and it did fix my problem. the first part solved the problem, but the second part made it look better (I didn’t know what the * was for in CSS, lol)

Thanks again for the assistance,