0.0.2

Styles

Customize the widget appearance with CSS custom properties (variables).

Visual appearance is fully customizable through CSS custom properties defined on the .rs root element. Override any variable in your own stylesheet to change colors, sizes, spacing, and animations — no need to touch the widget source or add extra build steps.

Container

VariableDefault
--rs-container-offset-x24px
--rs-container-offset-y24px
--rs-container-z-index10

Video container

VariableDefault
--rs-video-container-size-xs156px
--rs-video-container-size-sm192px
--rs-video-container-size-md352px
--rs-video-container-size-lg448px
--rs-video-container-size-xl544px
--rs-video-container-size-xxl640px
--rs-video-container-backgroundwhite
--rs-video-container-bordernone
--rs-video-container-border-radius8px
--rs-video-container-shadow0 0 20px rgba(0, 0, 0, 0.2)
--rs-video-container-transitionall 0.3s ease-in-out
--rs-video-container-overflowhidden

Video

VariableDefault
--rs-video-border-radius8px

Video loader

VariableDefault
--rs-video-loader-size-xs24px
--rs-video-loader-size-sm32px
--rs-video-loader-size-md48px
--rs-video-loader-size-lg64px
--rs-video-loader-size-xl80px
--rs-video-loader-size-xxl96px
--rs-video-loader-fillwhite
--rs-video-loader-animation0.75s infinite linear

Video progress

VariableDefault
--rs-video-progress-track-colorrgba(255, 255, 255, 0.2)
--rs-video-progress-buffer-colorrgba(255, 255, 255, 0.4)
--rs-video-progress-progress-colorrgb(255, 255, 255)
--rs-video-progress-border-radius0

Video controls

VariableDefault
--rs-video-controls-drop-shadowdrop-shadow(0 0 10px rgba(0, 0, 0, 0.5))
--rs-video-controls-transitionall 0.3s ease
--rs-video-controls-transformscale(1.1)
--rs-video-controls-z-index20

Video volume

VariableDefault
--rs-video-volume-drop-shadowdrop-shadow(0 0 10px rgba(0, 0, 0, 0.5))
--rs-video-volume-transitionall 0.3s ease
--rs-video-volume-transformscale(1.1)
--rs-video-volume-z-index20

CTA button

VariableDefault
--rs-cta-button-colorrgb(255, 255, 255)
--rs-cta-button-backgroundrgb(0, 0, 0)
--rs-cta-button-background-hovercolor-mix(in srgb, rgb(0, 0, 0) 80%, transparent)
--rs-cta-button-background-pressedcolor-mix(in srgb, rgb(0, 0, 0) 60%, transparent)
--rs-cta-button-shadow0 0 20px rgba(0, 0, 0, 0.2)
--rs-cta-button-transitionall 0.3s ease
--rs-cta-button-z-index20

Close button

VariableDefault
--rs-close-button-colorrgb(255, 255, 255)
--rs-close-button-backgroundrgb(0, 0, 0)
--rs-close-button-background-hovercolor-mix(in srgb, rgb(0, 0, 0) 80%, transparent)
--rs-close-button-background-pressedcolor-mix(in srgb, rgb(0, 0, 0) 60%, transparent)
--rs-close-button-border-radius100%
--rs-close-button-transitionall 0.3s ease
--rs-close-button-z-index20
--rs-close-button-icon-size-xs14px
--rs-close-button-icon-size-sm16px
--rs-close-button-icon-size-md18px
--rs-close-button-icon-size-lg20px
--rs-close-button-icon-size-xl22px
--rs-close-button-icon-size-xxl24px

Button (shared)

Shared variables for button sizing across all button types.

VariableDefault
--rs-button-size-xs32px
--rs-button-size-sm36px
--rs-button-size-md44px
--rs-button-size-lg50px
--rs-button-size-xl56px
--rs-button-size-xxl58px
--rs-button-font-size-xs10px
--rs-button-font-size-sm12px
--rs-button-font-size-md13px
--rs-button-font-size-lg14px
--rs-button-font-size-xl16px
--rs-button-font-size-xxl18px
--rs-button-padding-xs0px 8px
--rs-button-padding-sm0px 12px
--rs-button-padding-md0px 18px
--rs-button-padding-lg0px 24px
--rs-button-padding-xl0px 32px
--rs-button-padding-xxl0px 36px
--rs-button-gap-xs4px
--rs-button-gap-sm6px
--rs-button-gap-md8px
--rs-button-gap-lg10px
--rs-button-gap-xl12px
--rs-button-gap-xxl14px
--rs-button-colorrgb(255, 255, 255)
--rs-button-backgroundrgb(0, 0, 0)
--rs-button-background-hoverrgb(25, 25, 25)
--rs-button-bordernone
--rs-button-border-radius4px
--rs-button-transitionall 0.3s ease

Icons

VariableDefault
--rs-icon-size-xs22px
--rs-icon-size-sm24px
--rs-icon-size-md28px
--rs-icon-size-lg32px
--rs-icon-size-xl36px
--rs-icon-size-xxl40px
--rs-icon-colorrgb(255, 255, 255)

Full reference

All CSS custom properties with their default values:

.rs {
  /* Container */
  --rs-container-offset-x: 24px;
  --rs-container-offset-y: 24px;
  --rs-container-z-index: 10;

  /* Video container */
  --rs-video-container-size-xs: 156px;
  --rs-video-container-size-sm: 192px;
  --rs-video-container-size-md: 352px;
  --rs-video-container-size-lg: 448px;
  --rs-video-container-size-xl: 544px;
  --rs-video-container-size-xxl: 640px;
  --rs-video-container-background: white;
  --rs-video-container-border: none;
  --rs-video-container-border-radius: 8px;
  --rs-video-container-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  --rs-video-container-transition: all 0.3s ease-in-out;
  --rs-video-container-overflow: hidden;

  /* Video */
  --rs-video-border-radius: 8px;

  /* Video loader */
  --rs-video-loader-size-xs: 24px;
  --rs-video-loader-size-sm: 32px;
  --rs-video-loader-size-md: 48px;
  --rs-video-loader-size-lg: 64px;
  --rs-video-loader-size-xl: 80px;
  --rs-video-loader-size-xxl: 96px;
  --rs-video-loader-fill: white;
  --rs-video-loader-animation: 0.75s infinite linear;

  /* Video progress */
  --rs-video-progress-track-color: rgba(255, 255, 255, 0.2);
  --rs-video-progress-buffer-color: rgba(255, 255, 255, 0.4);
  --rs-video-progress-progress-color: rgb(255, 255, 255);
  --rs-video-progress-border-radius: 0;

  /* Video controls */
  --rs-video-controls-drop-shadow: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  --rs-video-controls-transition: all 0.3s ease;
  --rs-video-controls-transform: scale(1.1);
  --rs-video-controls-z-index: 20;

  /* Video volume */
  --rs-video-volume-drop-shadow: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  --rs-video-volume-transition: all 0.3s ease;
  --rs-video-volume-transform: scale(1.1);
  --rs-video-volume-z-index: 20;

  /* Button (shared) */
  --rs-button-size-xs: 32px;
  --rs-button-size-sm: 36px;
  --rs-button-size-md: 44px;
  --rs-button-size-lg: 50px;
  --rs-button-size-xl: 56px;
  --rs-button-size-xxl: 58px;
  --rs-button-font-size-xs: 10px;
  --rs-button-font-size-sm: 12px;
  --rs-button-font-size-md: 13px;
  --rs-button-font-size-lg: 14px;
  --rs-button-font-size-xl: 16px;
  --rs-button-font-size-xxl: 18px;
  --rs-button-padding-xs: 0px 8px;
  --rs-button-padding-sm: 0px 12px;
  --rs-button-padding-md: 0px 18px;
  --rs-button-padding-lg: 0px 24px;
  --rs-button-padding-xl: 0px 32px;
  --rs-button-padding-xxl: 0px 36px;
  --rs-button-gap-xs: 4px;
  --rs-button-gap-sm: 6px;
  --rs-button-gap-md: 8px;
  --rs-button-gap-lg: 10px;
  --rs-button-gap-xl: 12px;
  --rs-button-gap-xxl: 14px;
  --rs-button-color: rgb(255, 255, 255);
  --rs-button-background: rgb(0, 0, 0);
  --rs-button-background-hover: rgb(25, 25, 25);
  --rs-button-border: none;
  --rs-button-border-radius: 4px;
  --rs-button-transition: all 0.3s ease;

  /* Close button */
  --rs-close-button-size-xs: 18px;
  --rs-close-button-size-sm: 22px;
  --rs-close-button-size-md: 24px;
  --rs-close-button-size-lg: 28px;
  --rs-close-button-size-xl: 32px;
  --rs-close-button-size-xxl: 34px;
  --rs-close-button-color: rgb(255, 255, 255);
  --rs-close-button-background: rgb(0, 0, 0);
  --rs-close-button-background-hover: color-mix(in srgb, rgb(0, 0, 0) 80%, transparent);
  --rs-close-button-background-pressed: color-mix(in srgb, rgb(0, 0, 0) 60%, transparent);
  --rs-close-button-border-radius: 100%;
  --rs-close-button-transition: all 0.3s ease;
  --rs-close-button-z-index: 20;
  --rs-close-button-icon-size-xs: 14px;
  --rs-close-button-icon-size-sm: 16px;
  --rs-close-button-icon-size-md: 18px;
  --rs-close-button-icon-size-lg: 20px;
  --rs-close-button-icon-size-xl: 22px;
  --rs-close-button-icon-size-xxl: 24px;

  /* CTA button */
  --rs-cta-button-color: rgb(255, 255, 255);
  --rs-cta-button-background: rgb(0, 0, 0);
  --rs-cta-button-background-hover: color-mix(in srgb, rgb(0, 0, 0) 80%, transparent);
  --rs-cta-button-background-pressed: color-mix(in srgb, rgb(0, 0, 0) 60%, transparent);
  --rs-cta-button-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  --rs-cta-button-transition: all 0.3s ease;
  --rs-cta-button-z-index: 20;

  /* Icons */
  --rs-icon-size-xs: 22px;
  --rs-icon-size-sm: 24px;
  --rs-icon-size-md: 28px;
  --rs-icon-size-lg: 32px;
  --rs-icon-size-xl: 36px;
  --rs-icon-size-xxl: 40px;
  --rs-icon-color: rgb(255, 255, 255);
}

Video

Configure video source, poster, preload, autoplay, loop, muted, volume, and playback options.

Container

Configure the widget container with position and placement options.