Tengo un contenedor y un video como elemento secundario:
.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>¡Quiero cambiar el tamaño de la altura del video y el ancho y la altura del contenedor deberían seguir como si hubiera un solo elemento, no dos!
Cómo puedo hacer esto ?
Tenga en cuenta que queremos la relación de aspecto original del video incluso cambiando la altura del mismo y el contenedor debe seguir los cambios del video.
Esto funciona de forma nativa.
.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>width: min-content en .container permite que su ancho se ajuste al ancho de su contenido como una envoltura retráctil.
En el ejemplo, el rango <input> cambiará la altura del video. El video mantendrá su AR naturalmente. Tenga en cuenta que el borde rojo de .container siempre se ajusta a las dimensiones del video.
JavaScript es solo para fines de demostración.
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: <input id='ht' type='range' min='90' max='405' value='260'> <output id='hpx'></output></label> <div class='container'> <video src="https://www.w3schools.com/tags/mov_bbb.mp4" class="child"></video> </div> </form>