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

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


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

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