container should follow the aspect ratio of the video child

Question

I have a container and a video as a child element:

.container {
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: auto;
}

.child {
  height: 260px;
  display: inline;
  width: auto;
}

<div class="container">
  <video src="https://www.w3schools.com/tags/mov_bbb.mp4" class="child"></video>
</div>

I want to resize the video height and the container width and heght should follow like there is a single element not two !!

How can I do this ?

Note that we want the original aspect ratio of the video even by changing the height of it and the container should follow the changes of video

**the container should follow the changes of video** not the opposite — Temani Afif, Jul 23 '22 at 21:38

score 1 · Answer 1 · answered Jul 23 '22 at 21:20

This works natively.

.container {
  border: 2px solid red;
  display: inline-block;
}

.child {
  height: 200px;
  display: block;
  width: auto;
}

<div class="container">
  <video src="https://www.w3schools.com/tags/mov_bbb.mp4" class="child"></video>
</div>

score 1 · Answer 2 · answered Jul 23 '22 at 22:59

width: min-content on .container allows it's width to conform to the width of it's content like shrink wrap.

In the example, the range <input> will change the height of the video. The video will keep it's AR naturally. Note that the red border of .container always conforms to the video's dimensions.

JavaScript is only for demonstration purposes

document.forms[0].oninput = changeVideoHeight;

function changeVideoHeight(e) {
  const fc = this.elements;
  fc.hpx.value = fc.ht.value + "px";
  document.querySelector('.child').style.height = fc.ht.value + "px";
}

.container {
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: min-content;
}

.child {
  height: 260px;
  display: inline;
  width: auto;
}

<form>
  <label>Height:&nbsp;
  <input id='ht' type='range' min='90' max='405' value='260'>
  &nbsp;<output id='hpx'></output></label>
  
  <div class='container'>
    <video src="https://www.w3schools.com/tags/mov_bbb.mp4" class="child"></video>
  </div>
  
</form>

container should follow the aspect ratio of the video child

2 Answers2