CSS variables

JS embed only

The player is styled through CSS custom properties set on the vturb-smartplayer element. Every variable has a default, so you only declare the ones you want to change.

CSS variables do not reach a player embedded in an iframe. The browser's cross-origin rules stop your stylesheet at the boundary — see Element vs iframe. Styling is the usual reason to choose the custom element embed.

What each group controls

Group	What it styles
Transitions	Speed and easing of animations across the interface.
Player	Vertical video width, border radius and shadow.
Style	Global font family and background opacity.
Controls	The control bar: spacing, button sizes, mobile sizing.
Progress bar	Track, played portion, hover and handle of the bar.
Headlines	Text headings rendered inside the player.
Resume	The prompt offering to continue a previous session.
Thumbsniper	The preview shown when hovering the progress bar.
Call-to-action	Buttons and prompts shown during playback.
Volume	The volume slider.
Anchor button	The anchored call-to-action button.
Bezel	Overlay animations on play, pause and seek.
Big play	The large play button shown before playback starts.
Subtitles	Captions and their background.

Full list

styles.css

vturb-smartplayer {
  /* Transition variables */
  --base-transition-duration: 0.3s;
  --base-transition-delay: 0s;
  --base-transition-cubic: cubic-bezier(0.25, 0.1, 0.25, 1);
  --base-transition: var(--base-transition-duration) var(--base-transition-cubic) var(--base-transition-delay);

  /* Player component variables */
  --player-vertical-width: 400px;
  --player-border-radius: none;
  --player-box-shadow: none;

  /* Style variables */
  --style-font-family: Roboto, Helvetica, Arial, Tahoma, sans-serif;
  --style-background-opacity: rgba(0, 0, 0, 0.7);
  --style-hover-background: rgba(255, 255, 255, .1);
  --style-dark-hover-background: rgba(0, 0, 0, .85);

  /* Control component variables */
  --control-index: 5;
  --control-padding: 0.625em;
  --control-translate-y: 100%;
  --control-gap-vertical: 0.875em;
  --control-gap-horizontal: 0.625em;
  --control-border-radius: 0.3em;
  --control-button-size: 1.5em;
  --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;

  /* Progressbar component variables */
  --progressbar-background-color: rgba(255, 255, 255, 0.2);
  --progressbar-fill-color: var(--style-foreground, #ffffff);
  --progressbar-hover-color: rgba(255, 255, 255, 0.4);
  --progressbar-handle-color: var(--style-foreground, #ffffff);
  --progressbar-height: 0.25em;

  /* Headline component variables */
  --headline-font-family: inherit;
  --headline-margin-bottom: 1.875em;

  /* Resume component variables */
  --resume-background-color: var(--style-background);
  --resume-blur: 0.3125em;
  --resume-font-size: 1em;
  --resume-foreground-color: var(--style-foreground);
  --resume-index: 10;
  --resume-line-height: 1.3;
  --resume-min-width: 180px;

  /* Thumbsniper component variables */
  --thumbsniper-background-color: black;
  --thumbsniper-image-fit: contain;
  --thumbsniper-index: 100;
  --thumbsniper-button-margin: 1.25em;

  /* Callaction component variables */
  --callaction-index: 100;
  --callaction-button-margin: 1.25em;

  /* Volume component variables */
  --volume-slider-height: 0.25em;

  /* Anchor button component variables */
  --anchor-button-base-font-size: 18px;
  --anchor-button-background-color: var(--style-background);
  --anchor-button-background-color-hover: var(--style-background-hover);
  --anchor-button-zindex: 100;
  --anchor-button-border-radius: 5px;
  --anchor-button-color: var(--style-foreground);
  --anchor-button-color-hover: var(--style-foreground-hover);
  --anchor-button-font-size: 1em;
  --anchor-button-line-height: 1.2;
  --anchor-button-font-weight: 700;
  --anchor-button-size-lg: 1.5em;
  --anchor-button-size-md: 1.25em;
  --anchor-button-size-sm: 1em;
  --anchor-button-display: inline-block;
  --anchor-button-padding: 1.25em;

  /* Bezel component variables */
  --bezel-display: initial;
  --bezel-color: #ffffff;
  --bezel-animation-duration: 0.5s;
  --bezel-animation-timing: linear;
  --bezel-scale-start: 1;
  --bezel-scale-end: 2;
  --bezel-opacity-start: 1;
  --bezel-opacity-end: 0;
  --bezel-icon-size: 5em;
  --bezel-icon-padding: 1.25em;
  --bezel-background-color: rgba(0, 0, 0, 0.5);
  --bezel-border-radius: 50%;
  --bezel-icon-fill: #ffffff;
  --bezel-loading-min-width: 100px;
  --bezel-loading-width: 45%;
  --bezel-loading-max-width: 200px;

  /* Bigplay button variables */
  --bigplay-base-size: 10em;
  --bigplay-border-radius: 5em;
  --bigplay-background: transparent;
  --bigplay-opacity: 0.9;
  --bigplay-padding-y: 1.6em;
  --bigplay-padding-x: 0.8em;
  /* Responsive bigplay sizes */
  --bigplay-size-360: 6.5em;
  --bigplay-size-480: 5.75em;
  --bigplay-size-550: 7.5em;

  /* Subtitle component variables */
  --subtitle-max-width: 75%;
  --subtitle-max-width-small: 85%;
  --subtitle-text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.8);
  --subtitle-padding: 0.25em 0.4em;
  --subtitle-line-height: 1.675;
  --subtitle-font-weight: 500;
  --subtitle-letter-spacing: 0.03em;
}

A few of these come from the player configuration in the VTurb dashboard, which takes precedence: --player-border-radius, --style-background-opacity, --resume-background-color, --resume-foreground-color and --bigplay-background. To set one of them from your stylesheet, add !important.

Examples shows the common changes, and Responsive design covers how the player scales.

CSS variables

What each group controls

Full list

On this page