How to Get 16:9 Embedded Videos to Auto Resize w/ Responsive Design

[lecksus (Ryan Leckie)]

Hey all here’s the breakdown of my situation:

MY SITUATION:
I’ve uploaded a series of super short 1080 x 1920 (16:9) background videos that will basically function as looping GIF’s minus the large file size and poor image quality. The background videos are setup within a div, and the div is contained within a section. Each section contains its own visual (e.g. looping video or static image) and/or copy. The sections are all contained within a container.

MY PROBLEM
From a responsive design standpoint, I’m unable to get all of my visuals (e.g. looping videos, static images) to scale responsively to window/viewport size changes while maintaining the 16:9 ratio of my visuals AND the original margins between all sections. I’ve attached some screenshots, one of which shows the video looking good on desktop view, while the other video looks cutoff and terrible on my phone view.

THINGS I’VE ALREADY TRIED:
I found this prior thread from 2019 and I tried inserting the custom code into my head section like the person recommends, which worked for this person (and apparently many other people on this thread), but it did nothing for me.

Background video responsive size

Thank you for your answer again. In the end, I found an answer while digging though the Inspector on the website. In case anyone struggles with this problem in the future: You have to add .w-background-video>video { max-width: -webkit-fill-available; to your custom Head code in the project settings inside the style tags. I tested it with Chrome and Safari on Mac, and Safari on iPhone – it seems to be working on these browsers!

I’m stuck! Any help would be greatly appreciated. Hopefully I was detailed enough. I’ll leave a link to my website so you can maybe try to see what I’ve done wrong and/or how I can fix this.

PS: I’m very new to all of this so that’s maybe why I’m struggling a little.

---

Here is my site Read-Only:
https://preview.webflow.com/preview/portfolio-f9d3a3?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-f9d3a3&preview=325d9594cb61b4343296af8b798be0dd&pageId=6069e7643c6881c5c8d9ab82&mode=preview

[mikeyevin]

You’ll want to probably use the “top padding” hack that folks will use for background images/videos:

Aspect Ratio Boxes | CSS-Tricks

Basically you create a wrapper that’s set to position: relative with top padding set to a percentage (calculated based on your aspect ratio) and the video iframe inside set to position: absolute with a width and height of 100%.

It’s a nifty trick that I’ve used in the past to create responsive sections for background images but it works nicely for anything that you can position within it