Responsive Background Video Solution (no custom code)

Community resources
1

Hello everyone - there might already be a solution here but I was not able to find it. I built a responsive background video solution without using custom code. Hope it helps someone out!

https://preview.webflow.com/preview/responsive-background-video-1?utm_medium=preview_link&utm_source=dashboard&utm_content=responsive-background-video-1&preview=366396826da8bfd75430800fc2066473&workflow=preview

2

Hi Aaron,
Sorry if it’s a noob question. I’ve just started learning Webflow.

So I looked at the linked webflow preview, and replicated the same settings. But I see no change. The video frame is still nto responsive.
I’m not sure what I am missing. Can you please explain the steps to achive this?
Thanks in advance!

3

Great solution! Can you share the step ?
Would be very helpfull
Thanks

4

hi @Olee_1 bg video has padding set to %. This is the old way how to and is a valid approach. The calculation of % is 9/16 = 0.5625 that’s why padding is set to 56.25%. This method is described on the forum many times.

Here is an article from 2017 to describe in detail if you are interested.

Modern CSS use aspect-ratio but WF doesn’t offer it in UI.