Estoy tratando de maximizar el tamaño de un elemento (iframe de reproductor de video integrado) dentro de restricciones particulares:

1. no debe ser más alto que 2/3 de la altura de su padre.
2. no debe ser más ancho que su padre.
3. debe mantener su relación de aspecto 16:9

Actualmente estoy logrando esto con Javascript ( 0.5625 y 1.778 son representaciones decimales de la relación de aspecto 16:9):

 function updateDimensions () { const video = document.querySelector('#video-player') const parentRect = document.querySelector("#parent").getBoundingClientRect() const maxHeight = parentRect.height * 0.667 const maxWidth = Math.min(maxHeight * 1.778, parentRect.width) video.setAttribute('width', maxWidth + 'px') video.setAttribute('height', maxWidth * 0.5625 + 'px') }

Este código se ejecuta una vez en el montaje y (se elimina) en cada cambio de tamaño.

Sin embargo, realmente parece que este debería ser el trabajo de CSS, probablemente sería más eficiente que CSS, y se siente como algo que debería lograrse con calc() , min() , propiedades personalizadas (variables) y aspect-ratio en CSS, pero no puedo averiguar cómo.

Esto es lo lejos que llegué:

 #video-player { --parent-height: ??? /* 1. should not be higher than 2/3 of its parent */ --max-video-height: calc(var(--parent-height) * 0.667) /* 2. should not be wider than its parent */ --video-width: min(calc(var(--max-video-height) * 1.778), 100%) width: var(--video-width) /* 3. should maintain its 16:9 aspect ratio */ /* height can be calculated with either: */ height: calc(var(--video-width) * 0.5625) /* or: */ aspect-ratio: 16 / 9 }

De la forma en que lo he escrito, todo depende de convertir la altura principal en una variable.

¿Hay una manera de hacerlo? ¿O hay otra forma de escribir esto en CSS para lograr lo que hace el código Javascript?

NOTA: anteriormente había estado usando un contenedor div y el truco #video-container { padding-top: 56.25% } para mantener la relación de aspecto del video, pero tener el contenedor configurado en position: relative parecía entrar en conflicto con mis intentos de alinearlo. con align-self: center; justify-self: center; (es un elemento de cuadrícula). Supongo que podría envolver el envoltorio en otro envoltorio y ponerlo en la cuadrícula, pero el código Javascript hace exactamente lo que quiero con el elemento en cuestión, sin necesidad de divs adicionales.