Design responsivo

O player se adapta sozinho. Tudo abaixo é para ajuste fino desse comportamento, não para fazê-lo funcionar.

Dimensionamento

Por padrão o player deriva a altura do vídeo. O atributo fluid inverte isso e o faz preencher o container, que é o que você quer dentro de um layout que já controla.

Limite a largura e deixe o aspect-ratio cuidar da altura. Altura fixa somada a headlines ou chamadas para ação é a combinação que corta vídeo.

Escala tipográfica

Quase toda dimensão do player é expressa em em, então tamanho de texto e tamanho de controle crescem juntos. O tamanho base acompanha a largura do próprio player, não a do viewport, em degraus fixos:

Os degraus fazem parte do player, então nenhuma variável os altera. Para aumentar ou diminuir juntos os controles, a headline e a chamada para ação, mude a largura que o player recebe. Recorra às variáveis de componente individuais só quando um elemento específico precisar sair da escala.

Área de toque

O dimensionamento dos controles em telas pequenas tem variáveis próprias, porque uma barra de controles que apenas encolhe fica 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;
}

O botão grande de play segue a mesma ideia, com --bigplay-size-360, --bigplay-size-480 e --bigplay-size-550.