[Resolved] center center for Page Hero Background Video

[Allen]

I followed the instructions for Page Hero Background Video per https://docs.generatepress.com/article/page-hero-background-video/ (although I think the css portion of the instructions there should have “width:100%; height:auto;” as part of .background-video to set the video to full width, as initially mine was aligned left with a big space on the right; so I added it in).

But after setting the padding in the Element, the video appears to be center top instead of center center, as I’m seeing all ceiling and no floor of the drone video: https://thegolfdome.com/test-page/

I found the following idea but couldn’t make it work: https://stackoverflow.com/questions/11219136/centering-full-window-video

Can you please review? Thank you!

–Allen Freeman

[Fernando]

Hi Allen,

Yes, we can try to review. Try not to set a top value.

Basically, remove this line:

top: 0;

[Allen]

Well that was easy. Worked perfectly. Thanks Fernando!

[Allen]

Ah, I spoke too soon. Removing top:0 works great until it gets down to mobile. Then the video sits on the bottom of the container with a big black bar at the top, even after reducing the headline size. I put top:0 back in and of course the vid goes to the top of the container and the black bar goes to the bottom (which is better but still not ideal).

I have a feeling the second solution in that stackoverflow link I sent might be a good answer for matching up screen to container, but I couldn’t get it to work properly with the content that overlays the button.

[Allen]

Well now I’m just having a conversation with myself. lol

I took out the bottom link in the hero header overlay content, and that reduced the amount of space required enough that the video fits the container again.

So all good…

[Fernando]

I see. Glad it’s all good now!

[Author]

Posts