Streaming live at 10am (PST)

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

Hey all here’s the breakdown of 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.

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.

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.

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:

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

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 :+1:

Duplicate post - See