Hero video scaling... AGAIN! - How are they doing this? (see example)

Design help Layout & Design
1

Hi there

check this site

The Hero video starts at full screen with 100VH but scales in height as screen width is reduced, thus it is always maintaining it’s (presumably 16:9 or 16:10) aspect ratio correctly

How are they doing this with the hero video? How do we reproduce this in webflow?

On a side note why can’t the Webflow team update the Hero BG video/image widget so this it scales as you design… It is such a requested feature - there are many many discussion on this, with various fixes offered, none of which ever work properly & then the discussion is closed - yet it never gets done)??

any ideas please? and btw i have not hosted the site so any additional header code must work in publish preview please

rsvp
cheers

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

2

ok i’m answering this myself so it’s possible to find this with google searches. Turns out despite reading many suggested fixes which did NOT work at all, it’s quite easy.

You add a hero bg video (whatever video resolution), make the container FLEX - Direction = Horizontal / Align = Centre / Justify = Centre - Make the width 100% - No other width or heigh settings - Margin-Left = Auto / Margin-Right = Auto

Now add padding-bottom for whatever the video aspect ration is:

aspect ratio padding-bottom value 
16:9      |       56.25%
4:3       |       75%
3:2       |       66.66%
8:5       |       62.5%

seems to work… I suppose it’ll work exactly the same with bg images too

cheers