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.

2
  • 3
    Possible duplicate of Maintain the aspect ratio of a div with CSS
    – Steve
    Nov 16, 2017 at 4: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, 2017 at 6:09

1 Answer 1

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.

4
  • Oh yeeeaaa... I forgot about object-fit. But the problem is, it isn't actually a <video>, it's an iframe (youtube video)
    – Jacob
    Nov 16, 2017 at 6: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, 2017 at 6: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, 2017 at 6: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, 2017 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.