CODEWITHSUNDEEP
htmlcssviewport-units
Jacob
Jacob

Reputation: 461

Maintain 16:9 aspect ratio according to width and height

So I have this video that I want to be, not quite fullscreen, but close. I want it to maintain its 16:9 aspect ratio but I want there to always be padding or space between the video and the edge of the screen. So what I have right now, https://jsfiddle.net/99yen3v3/, is:

width: 80vw;
height: 45vw;

for the div. It works fine when I shrink the web browser horizontally, the video div maintains its 16:9 aspect ratio. The only problem is, whenever I shrink the web browser vertically, the video slowly goes off the screen. I want that same padding to be there when I shrink the web browser vertically, if that makes any sense.

If you have any questions, or are confused, just ask. I would appreciate any help, thanks.

EDIT1: And I have checked out this post already, the only difference is they use a 1:1 ratio in that example, whereas mine is more difficult, being 16:9.

EDIT2: No my question is not a duplicate of this one. I clearly stated that I want the div to be contained also by the height of the browser window, not just width.

Upvotes: 1

Views: 3104

Answers (1)

Brad
Brad

Reputation: 163488

What you want is the CSS object-fit property, with contain for the value.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Since you're using <video> this is actually the default. Simply set the video size to 100% width/height, and padding on the parent.

Upvotes: 1

Related Questions