Background video sizing

Design help General
1

Hi all

I’m attempting to use the background video element to show some auto-playing screencaps for my folio.

There’s a sandbox of what I’m trying to achieve here: https://preview.webflow.com/preview/josh-s-test?preview=d640789ac1e5b8d7c3ad026f5d806b90

I’ve created a video still image for mobile, which I’m also using to make the parent div the right size on desktop. Despite this the video is the wrong size. It looks like it’s at ~110% width. You can hover over the video to compare to the still (which is the same dimensions as the video).

Has anyone else had this issue?

2

Ok judging by the CSS Webflow is using this is intentional.

For anyone else that ends up here, I’m just going to change the CSS for the <video> element in custom code. These are the rules that worked for me:

.screen-cap-video.w-background-video > video {
    background-size: contain;
    min-height:none;
    min-width:none;
    max-width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

5

Waow thanks for doing the work, it works great as it is! Just needed it and it solved my issue.

I even added object-fit: cover; so it can fit any parent ratio.