He leído muchas publicaciones de SO sobre cómo cambiar el tamaño del video para que se ajuste al navegador y / o al elemento principal, pero ninguna de ellas hace lo que necesito. Tengo una aplicación de una sola página con overflow: hidden, por lo que la aplicación no se desplaza. La aplicación tiene varios contenedores display:flex, y en uno de ellos quiero tener un video de 16x9. Quiero que todo el video siempre quepa en su contenedor (por lo que habrá barras en la parte superior / inferior si el contenedor es demasiado ancho, y barras en la izquierda / derecha si el contenedor es demasiado alto). Puedo usar width: 100% en el video para cambiar su tamaño según el ancho del contenedor, pero no puedo encontrar ninguna forma de reducirlo para que quepa cuando la altura del contenedor se reduce. (Supongo que eso se debe a que la mayoría de las páginas web crecen verticalmente, por lo que restringir en función de la altura es menos importante).

Descubrí que, al menos en Chrome, la etiqueta video no permite que height sea un porcentaje, y la especificación W3C está de acuerdo con eso, desafortunadamente. Probé el truco con un envoltorio de video en posición relativa con { {X2}} y luego poner el video de posición absoluta en eso, pero aún corta la parte inferior del video cuando el contenedor es demasiado ancho.

Aquí hay un jsfiddle; es más fácil ver allí que escribir sobre él: https://jsfiddle.net/darkstarsys/q1fr9jwd/ 2 / Allí verá que el video reacciona correctamente al ancho de su contenedor, pero la parte inferior del video se corta cuando la altura es pequeña. Juega con la altura y el ancho del elemento main para ver cómo reacciona al tamaño de su contenedor.

Me gustaría evitar una solución basada en Javascript si es posible; Parece que CSS debería poder hacer esto de alguna manera.

1
GaryO 26 oct. 2020 a las 00:42

1 respuesta

La mejor respuesta

No estoy seguro de si esto es lo que quieres, pero pruébalo:

.main {
  /*overflow: hidden;*/
  
  /* TRY ASPECT RATIOS HERE 
  800w x 300h doesn't work -- bottom gets cut off */
  width: 800px;
  height: 300px;
  background: red;
}
.video-wrapper {
  display: flex;
  height: 100%;
}
.video {
  width: 100%;
  height: auto; /* spec says no percent allowed here */
}
3
Daniel Hajduk 25 oct. 2020 a las 21:59