Variables CSS

Solo incrustación JS

El reproductor se estiliza con custom properties de CSS definidas en el elemento vturb-smartplayer. Cada variable tiene un valor por defecto, así que solo declaras las que quieres cambiar.

Las variables CSS no alcanzan un reproductor incrustado en un iframe. Las reglas cross-origin del navegador detienen tu hoja de estilos en la frontera — mira Elemento vs iframe. El estilo es la razón habitual para elegir la incrustación por elemento personalizado.

Qué controla cada grupo

Grupo	Qué estiliza
Transiciones	Velocidad y curva de las animaciones de la interfaz.
Reproductor	Ancho del vídeo vertical, radio del borde y sombra.
Estilo	Familia tipográfica global y opacidad del fondo.
Controles	La barra de controles: espaciado, tamaño de botones, medidas en móvil.
Barra de progreso	Pista, parte reproducida, hover y tirador de la barra.
Titulares	Títulos renderizados dentro del reproductor.
Resume	El aviso que ofrece continuar una sesión anterior.
Thumbsniper	La vista previa al pasar el cursor por la barra de progreso.
Llamada a la acción	Botones y avisos mostrados durante la reproducción.
Volumen	El deslizador de volumen.
Anchor button	El botón de llamada a la acción anclado.
Bezel	Animaciones superpuestas al reproducir, pausar y navegar.
Big play	El botón grande de reproducción antes de empezar.
Subtítulos	Subtítulos y su fondo.

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

Algunas de estas vienen de la configuración del reproductor en el panel de VTurb, que tiene precedencia: --player-border-radius, --style-background-opacity, --resume-background-color, --resume-foreground-color y --bigplay-background. Para definir una de ellas desde tu hoja de estilos, usa !important.

Ejemplos muestra los cambios más comunes, y Diseño responsivo cubre cómo escala el reproductor.

Variables CSS

Qué controla cada grupo

Lista completa

En esta página