Video Not Playing, Not Full Width, and in Wrong Place

Update! Thanks to the https://docs.generatepress.com/article/page-hero-background-video/ documentation I was able to figure out part of this, but I still need to change the video dimensions (not sure what would be right for the theme, but found this link to a webpage on header sizes: https://www.freewebheaders.com/website-header-sizes/).

I didn’t know page hero was a term until today, but now I understand I need transparent header and navigation to make all of this work. I don’t know how to do it yet though.

Hi there,

If you’re setting the video as a background using those directions, you shouldn’t need to set the dimensions (it should go full width).

Right now it seems to be overlapping your content/footer. Where exactly do you want the video to display?

Thank you, maybe I should be more specific. The video itself is 2000x2000px right now independent of setting any dimensions for it with css, so that’s why I was thinking I’d need to resize the actual video and upload the resized one so that it doesn’t go beyond the top bar horizontally like it is right now. In general, I am going to resize the actual video to achieve a certain look, so maybe 1920x540px or something.

I want the video to display right after the top bar, but so that the site logo and menu appear on it transparently.

Good news! I was able to figure out a good chunk of it piecing together different information you provided to other questions on the forum, so thank you very much for that! ??

Now there are just little things I’m still not quite getting:

a) I did away with the old top bar and placed the resized video in the top bar instead, but it’s still doing that thing where it causes a horizontal scroll outside of the rest of the site’s content.

b) Site content is appearing on the top bar. I’m hoping to make it so that the content appears only after the top bar/header.

c) The primary nav is sticky (yay!), but it goes all the way onto the footer, overlapping with the text/images there ( don’t know if there’s a fix to this, but it’d cool if there was!)

Thanks again for always helping directly and indirectly through the forums! You, your theme, and your team are a Godsend.

“a)” is solved with css, setting .background-video to max-width: 100%;

“b)” solved with adding to margin-bottom: of nav#site-navigation

for “c),” making the nav bar parent the body if it isn’t already, might work to stop it from continuing to scroll onto the footer, but i’m not sure how to do that.

i’ll try making the nav bar look more proper for now T^T

Hello,

I hope the things I learned when I was on this topic helps others! Sorry if my tone was not right — I was not doing so well at the time.

I’m trying my best to learn to communicate better from now on! ??

Stay safe and stay positive!