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 >
  <video src="https://www.w3schools.com/tags/mov_bbb.mp4" ></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

CodePudding user response：

This works natively.

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

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

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

CodePudding user response：

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" ></video>
  </div>
  
</form>