Archived topic
Page Hero Background Video not scaling on android
7 replies · Started by Raul on December 29, 2021
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
Can you please help?
Thanks,
Raul
Hi Raul,
Have you added the CSS mentioned in the article as well?
Let me know :)
Yes, the CSS is there. Works perfectly on desktop...
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%;
}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?
Give this CSS a try:
@media (max-width: 768px) {
video[poster] {
object-fit: cover;
aspect-ratio: 1/1;
}
}Let me know :)
Amazing! works perfectly, thanks so much and Happy 2022!
You are welcome :)
Happy new year to yourself!
