Diseño responsivo

El reproductor se adapta solo. Todo lo de abajo es para afinar ese comportamiento, no para que funcione.

Dimensionado

Por defecto el reproductor deriva su alto del vídeo. El atributo fluid invierte eso y lo hace llenar su contenedor, que es lo que quieres dentro de un layout que ya controlas.

Limita el ancho y deja que aspect-ratio resuelva el alto. Un alto fijo con titulares o llamadas a la acción es la combinación que recorta vídeo.

Escala tipográfica

Casi toda dimensión del reproductor está expresada en em, así que el tamaño del texto y el de los controles crecen juntos. El tamaño base sigue el ancho del propio reproductor, no el del viewport, en escalones fijos:

Los escalones son parte del reproductor, así que ninguna variable los cambia. Para agrandar o achicar a la vez los controles, el titular y la llamada a la acción, cambia el ancho que recibe el reproductor. Recurre a las variables de componente individuales solo cuando un elemento concreto deba salirse de la escala.

Área de toque

El dimensionado de los controles en pantallas pequeñas tiene sus propias variables, porque una barra de controles que solo se encoge queda difícil de acertar:

vturb-smartplayer {
  --control-mobile-button-padding: 1em;
  --control-mobile-button-featured-padding: 1.5em;
  --control-mobile-button-icon-size: 2em;
  --control-mobile-button-featured-icon-size: 3em;
}

El botón grande de reproducción sigue la misma idea, con --bigplay-size-360, --bigplay-size-480 y --bigplay-size-550.