Streaming live at 10am (PST)

I need help with how to make collumns (with background video) stay in 16x9 format no matter the browser size

Hello!

I’m creating a case study landing page (its called Design (draft)) and I want looping videos for each project, and I want the format to stay as 16x9 no matter the browser size.

I have put the background video inside a div block, which is inside a collumns box.

I desperately need help as I do not understand the sizing system here.

I want my video boxes to scale proportionally, like here: https://neue.no/work/

Here’s my read only link, and screenshots attached.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

try the padding trick on .div_case_bgvideo

Hey Bruno

Thanks for the tip, but it didn’t work. Now it looks like this:

Hello @kastleblack,

you should use grid rather than columns. That way you will have more control and flexibility over your design.

Thanks for your reply.

Unfortunately, it does the same thing:

It can’t be possible that webflow does not have a way to constrain proportions…? Can it?

Hello @kastleblack,

Yeah but so what you have to do is to set your container’s width to lets say 40vw and your height to 20vw or some ratio that you like, that way it will always maintain the same ratio. Let me know how it goes. Webflow displays the proportions that you set.

Tried that, but still not keeping proportions. I want a fixed 16x9 format. :frowning_face:

@kastleblack did you set the height in vw values? it doesn’t look like you did on your pictures

I did a quick video maybe it would help you better https://www.loom.com/share/508aa9cc106c4f7d847ad5df6e391902

1 Like

Hey, Yes I did.

But the values will change depending on the broswer window won’t it. So that means not constraining to the format.

Yes, that worked! But very strange that you put vw under Height! Anyway, who cares as long as it worked. Thanks, Pablo!

1 Like

Yeah it is strange but it allows you to be consistent with whatever ration you want to work with. Im glad it worked out for you. Take care.

1 Like

did you try setting the bottom padding to 56.25% - as it can be seen in my screenshot?