Customization

Theme your player with a JSON configuration.

Player Customization

JSON theme

Pass a theme attribute (Web Component) or prop (React) to customize the player appearance.

<ansdev-player
  api-key="ak_live_YOUR_KEY"
  video-id="vid_YOUR_VIDEO_ID"
  theme='{"colors":{"primary":"#FF6B6B","background":"#1a1a2e"}}'>
</ansdev-player>

<AnsdevPlayer
  apiKey="ak_live_YOUR_KEY"
  videoId="vid_YOUR_VIDEO_ID"
  theme={{
    colors:   { primary: '#FF6B6B', background: '#1a1a2e' },
    controls: { speed: false },
    branding: { show: true, position: 'bottom-right' },
  }}
/>

All theme options

{
  "colors": {
    "primary":    "#22D3EE",
    "secondary":  "#2563EB",
    "background": "#0F172A",
    "text":       "#F8FAFC",
    "controlBar": "rgba(0,0,0,0.8)"
  },
  "controls": {
    "playPause":   true,
    "volume":      true,
    "quality":     true,
    "fullscreen":  true,
    "speed":       true,
    "progressBar": true,
    "timeDisplay": true
  },
  "branding": {
    "show":     true,
    "text":     "Powered by Ansdev Cloud",
    "position": "top-left"
  }
}

colors

Token	What it paints
primary	Progress bar fill, focus ring, big-play button accent.
secondary	Reserved for future hover states.
background	Container background (only visible when video letterbox).
text	Time display + menu text.
controlBar	Bottom-bar gradient.

controls

Boolean toggles. Set any to false to hide that control entirely. Hiding playPause will not disable playback — the user can still click the video itself.

branding

Field	Notes
show	false hides the watermark entirely.
text	Free-form. Replace with your own brand string.
position	top-left, top-right, bottom-left, bottom-right.

CSS custom properties

Under the hood, theme colors become CSS custom properties on the player container:

--ap-primary, --ap-secondary, --ap-bg, --ap-text, --ap-control-bar

The Web Component scopes these to its Shadow Root, so they can’t leak. The React version scopes them to the player container via inline style.

Just need to recolor the brand accent? Pass only colors.primary — everything else inherits the dark cyberpunk default.