Background video horizontal scaling issue

Author Posts

Martin_1

Hi,

I am not sure if this can be solved with CSS and have no idea where to begin. I have a hero with a background video. When I look at it on a mobile device the left and right side of the video are being cut off.

Is there a way to scale it horizontally as well. I have set the minimum height to 750px and is working fine.

https://www.nardkwast.com/

Martin


Sebastian

Hey Martin,

Sorry I wasn’t able to respond yesterday. I’ve just checked your site, but I can’t see the cut off sides. Have you since fixed this?

Cheers,
Sebastian


Martin_1

Hi Sebastian,

No it is still a problem. I have two screenshots for you that shows what it looks like on mobile and what it looks like on desktop.

On mobile for example, the brown pot on the right hand side isn’t even visible.

I have now created two containers. 1 for tablet and desktop (width a set height of 750px) and 1 for mobile (without a set height) but it made no difference.

Desktop version

Mobile version


Sebastian

Oh I see what you mean. I think that’s a deliberate trade-off to ensure that the background video is full bleed. It sounds like you would prefer the video to scale down on mobile horizontally. The trouble there is that the video would not necessarily fill the hero section vertically.

If you want to play around with this yourself, these are the properties you could change to get the video to scale down (but encounter the issue I flagged).

.fullwidth-box.video-background .fullwidth-video video {
    min-height: 0;
    min-width: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

The original values, which keeps the video sizing consistent even on mobile (by cropping rather than scaling), is as follows:

.fullwidth-box.video-background .fullwidth-video video {
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    object-fit: cover;
}

If I were you, I would just leave the current design, or hide the video background on mobile and just have a plain color or gradient.

I hope that helps a bit!

Cheers,
Sebastian


Martin_1

Hi Sebastian,

I suggested that, but the client demands a video on mobile :-(. I have now added it and tweaked your css and added a bit of my own and it looks … okay.

However I am running into another problem. I have a 32inch screen and the video looks great. However as soon as I reduce the screensize a bit, left and right of the video are again being cut off.

Why won’t it just scale down?

I have tried it by removing the minimum height. I tried it by setting the minimum height to 100%. But no luck.

I though I just reuse the css I used for mobile but adjust it. But also to no avail.


Sebastian

Hi Martin,

Here is the full list of properties being set on the video by your theme:

.fullwidth-box.video-background .fullwidth-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

You could set position to static and transform to none to override some more styling. The absolute positioning and transform properties are designed to center the video, keeping the size consistent due to object-fit: cover.

You could then set the previous values I suggested but with a slight alteration of height to 100%

min-height: 0;
min-width: 0;
height: 100%;
width: auto;

From playing around with it, that’s the best I can do. Some cropping is unavoidable on mobile if you want the video to fill the height of the hero section (which I think you do). That’s because the landscape video must occupy a more portrait ratio on mobile, so the sides are cropped.

I hope that helps!

Cheers,
Sebastian

You must login or register to reply to this topic.