[Resolved] Page Hero Background Video not scaling on android

[Raul]

Hi there,

I am trying to create a full-page hero background video following the instructions https://docs.generatepress.com/article/page-hero-background-video/
and works fine on Desktop. My problem is that when checking on my android phone, the video is not scaling properly, please take a look

http://www.onwhitewall.com

Can you please help?

Thanks,
Raul

[Ying]

Hi Raul,

Have you added the CSS mentioned in the article as well?

Let me know 🙂

[Raul]

Yes, the CSS is there. Works perfectly on desktop…

[Ying]

I’m not seeing the CSS is being added to your site, how did you add the CSS?

But as you don’t have text content in the header element and you are using merge, only this CSS would be needed:

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

[Raul]

Got it, thanks Ying, you pointed me to the right direction. The issue was I was using extender pro to add CSS and somehow it was only working if logged in as admin; I added the CSS using the customize > Additional CSS and works perfectly.

One other question, what do you suggest to change the video proportion on mobile to make it more square, let’s say to display more or less have of the height of the device on portrait mode?

[Ying]

Give this CSS a try:

@media (max-width: 768px) {
video[poster] {
    object-fit: cover;
    aspect-ratio: 1/1;
}
}

Let me know 🙂

[Raul]

Amazing! works perfectly, thanks so much and Happy 2022!

[Ying]

You are welcome 🙂

Happy new year to yourself!

[Author]

Posts