Variáveis CSS

Só embed JS

O player é estilizado por custom properties do CSS definidas no elemento vturb-smartplayer. Toda variável tem um padrão, então você só declara as que quer mudar.

Variáveis CSS não alcançam um player incorporado em iframe. As regras de cross-origin do navegador param sua folha de estilo na fronteira — veja Elemento vs iframe. Estilização é o motivo habitual para escolher o embed por elemento customizado.

O que cada grupo controla

Grupo	O que estiliza
Transições	Velocidade e curva das animações da interface.
Player	Largura de vídeo vertical, raio da borda e sombra.
Estilo	Família de fonte global e opacidade de fundo.
Controles	A barra de controles: espaçamento, tamanho dos botões, dimensões em mobile.
Barra de progresso	Trilha, parte assistida, hover e alça da barra de reprodução.
Headlines	Títulos renderizados dentro do player.
Resume	O aviso que oferece continuar uma sessão anterior.
Thumbsniper	A prévia exibida ao passar o cursor pela barra de progresso.
Chamada para ação	Botões e avisos exibidos durante a reprodução.
Volume	O controle deslizante de volume.
Anchor button	O botão de chamada para ação ancorado.
Bezel	Animações de sobreposição ao dar play, pausar e navegar.
Big play	O botão grande de play exibido antes da reprodução começar.
Legendas	Legendas e o fundo delas.

Lista completa

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

Algumas destas vêm da configuração do player no painel do VTurb, que tem precedência: --player-border-radius, --style-background-opacity, --resume-background-color, --resume-foreground-color e --bigplay-background. Para definir uma delas pela sua folha de estilo, use !important.

Exemplos mostra as mudanças mais comuns, e Design responsivo cobre como o player escala.

Variáveis CSS

O que cada grupo controla

Lista completa

Nesta página