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

[kastleblack]

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.
https://preview.webflow.com/preview/kastleblack-website?utm_medium=preview_link&utm_source=designer&utm_content=kastleblack-website&preview=674e04abf030bf4ab343ee3ff344873f&pageId=5f620b4a2bba4d12f7fa741e&mode=preview

---

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

[brun0 (Bruno Bürgi)]

try the padding trick on .div_case_bgvideo

[kastleblack]

Hey Bruno

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

[Pablo_Cortes]

Hello @kastleblack,

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

[kastleblack]

Thanks for your reply.

Unfortunately, it does the same thing:

[kastleblack]

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

[Pablo_Cortes]

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.

[kastleblack]

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

[Pablo_Cortes]

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

[Pablo_Cortes]

I did a quick video maybe it would help you better Loom | Free Screen & Video Recording Software | Loom

[kastleblack]

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.

[kastleblack]

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

[Pablo_Cortes]

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.

[brun0 (Bruno Bürgi)]

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