Responsive design

The player adapts on its own. Everything below is for fine-tuning that behaviour, not for making it work in the first place.

Sizing

By default the player derives its height from the video. The fluid attribute flips that around and makes it fill its container instead, which is what you want inside a layout you already control.

Constrain the width and let aspect-ratio handle the height. A fixed height plus headlines or calls-to-action is the combination that crops video.

Type scale

Almost every dimension in the player is expressed in em, so text size and control size scale together. The base size follows the width of the player itself, not of the viewport, in fixed steps:

The steps are part of the player, so no variable changes them. To make the controls, the headline and the call-to-action larger or smaller together, change the width the player gets. Reach for the individual component variables only when one element specifically needs to break from the scale.

Touch targets

Control sizing on small screens has its own variables, because a control bar that merely scales down becomes hard to hit:

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;
}

The big play button follows the same idea, with --bigplay-size-360, --bigplay-size-480 and --bigplay-size-550.