1

Edit: Codepen with wireframe: https://codepen.io/djdmorrison/pen/RwNNpLb If I reduce the .container width, the video becomes smaller as expected but keeps aspect ratio. However, if I reduce the .container height, I want the video to become smaller (reduce width) to not overflow.

I've solved this with javascript but would rather a CSS solution.

I have the following wireframe: enter image description here

This needs to be a single-page application - no scrolling. Header, chat sidebar, footer are all fixed sizes. The video description is a fixed height determined by its content. The video then takes up the remaining space, keeping a 16:9 aspect ratio. If the video height is small enough, then it 'sticks' to the bottom of the video and leaves any empty space below it. If the video height is large, then the video description should reach the bottom and the video should become smaller to fill the remaining space.

I've used the padding-top/bottom: 56.25% trick to keep the video aspect ratio. This works well when the window is thin and tall enough. However, when the window is wide and short the video takes up the full remaining width, causing the height to increase and push the video description off the window.

The solution here is to set the video width so that it's at a size where the video description touches the bottom without falling off the page.

Psuedo code used for this (where videoContainer is the space for the video and description)

video.width = (videoContainer.height - videoDescription.height) * (16/9) + 'px'

This works well with javascript but I'd rather a CSS solution so I don't have to rely on event listeners to resize.

Thanks!

DJDMorrison
  • 1,302
  • 2
  • 17
  • 34
  • Does this answer your question? [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Heretic Monkey Dec 03 '19 at 16:57
  • That answer explains how to keep the aspect ratio which I've already mentioned in my question but not how to adapt the video width based on the window height. – DJDMorrison Dec 03 '19 at 17:10
  • There are 23 answers on the question I linked to... – Heretic Monkey Dec 03 '19 at 17:15

1 Answers1

1

If you wish to use a pure CSS solution, the object-fit property may do the job for you. In pseudo-code: img {object-fit: fill}

fill is the default option and will fill the parent container. What I think you want from your question is to maintain the aspect ratio of the video so you may wish to use something like img {object-fit: contain} so that the aspect ratio is maintained.

I know many people in this cohort would shiver when w3school is mentioned but here is a quick reference for you to lookup without making hours of reseach and doc reading.

You may want to look into the fit-content() CSS function as well if you wish to use pixels or relative values to determine the size of the video container. For example: 

#container__video {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
}

For a more authoritative reference about fit-content() see the Mozilla's Doc

Let me know if this is what you are after.

rags2riches-prog
  • 1,663
  • 1
  • 10
  • 22
  • The library I'm using for the video (jwplayer) is already using `object-fit: container` to maintain the aspect ratio of the video itself. I think this question is more for setting the size of the container. – DJDMorrison Dec 03 '19 at 17:42
  • @DJDMorrison doesn't fit-content nor object-fit work out the same for the container? Maybe I've missed something about your question but I specifically mentioned video container in my answer. – rags2riches-prog Dec 03 '19 at 18:15