1

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.

Jacob
  • 439
  • 6
  • 19
  • 3
    Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Steve Nov 16 '17 at 04:44
  • @Steve Nope, not a duplicate. Using `width: 100%; padding-bottom: 56.25%` still doesn't get me what I'm looking for. If I scale the browser height, making it smaller, the div goes off screen. – Jacob Nov 16 '17 at 06:09

1 Answers1

1

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.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Oh yeeeaaa... I forgot about `object-fit`. But the problem is, it isn't actually a ` – Jacob Nov 16 '17 at 06:27
  • You should be able to use `object-fit`, but who knows if the YouTube embedding thing is going to behave. You should make a new question if your question is actually about the YouTube embedded player API. – Brad Nov 16 '17 at 06:28
  • I don't believe this is an issue with the YouTube embedded player at all. I just want to be able to contain a element (whether it be an iframe or a div), while maintaining it's aspect ratio, inside a wrapper. – Jacob Nov 16 '17 at 06:35
  • @Jacob The trouble is, that iframe has no inherent size. The stuff inside it may. You would have to set the iframe to be full width/height, and hope the YouTube stuff inside of it knows what to do. – Brad Nov 16 '17 at 17:09