Theming

Every visual option of Vega Player is an attribute, so you theme it in the markup itself: no stylesheet, no class names, no build step. Each player on a page can look different.

<vega-player
  src="/video.mp4"
  poster="/poster.jpg"
  color-primary="#ffffff"
  color-controls="rgba(10, 10, 10, 0.85)"
  play-btn-color="#ffffff"
  play-btn-size="lg">
</vega-player>

color-primary="#8f8f8f" play-btn-color="#d4d4d4" play-btn-size="lg"

Colors

Attribute	Default	What it colors
color-primary	#aaa	Progress bar, volume fill, active menu items, hover states, spinner, retry button and, unless set below, the call-to-action button.
color-controls	rgba(0,0,0,0.7)	Control bar and menus.
color-overlay	rgba(0,0,0,0.95)	Background behind the call-to-action modal.
play-btn-color	rgba(255,255,255,0.9)	Background of the large centre play button.
cta-bg-color	color-primary	Call-to-action button.
cta-text-color	#000	Call-to-action text.
cta-hover-bg-color	#fff	Call-to-action button on hover.
cta-hover-text-color	#000	Call-to-action text on hover.
modal-description-color	rgba(255,255,255,0.7)	Description text in the modal.

Any CSS color works: #hex, rgb(), hsl(), named colors…

Play button

<vega-player
  src="/video.mp4"
  play-btn-size="sm"
  play-btn-color="#0a0a0a"
  play-btn-icon="/icons/play.svg">
</vega-player>

Attribute	Values
play-btn-size	sm, md (default) or lg.
play-btn-color	Background color of the button.
play-btn-icon	An image URL, or inline SVG / icon-font markup (sanitised).
hide-play-button	Hides the centre button (the play button in the control bar stays).

Controls and shape

<vega-player
  src="/video.mp4"
  aspect-ratio="21:9"
  controls-visible
  show-stop-button
  hide-fullscreen-button>
</vega-player>

Attribute	What it does
aspect-ratio	Box shape, for example 16:9 (default), 4:3, 1:1, 21:9.
controls-visible	Controls always on screen; controls-visible="false" removes them (background videos).
controls-hide-on-hover	Hides the controls while the mouse is over the player.
hide-on-play-delay	Seconds after which the controls fade out while playing.
show-stop-button, hide-fullscreen-button	Add or remove buttons.
show-playback-rate, enable-pip, enable-chromecast	Speed menu, Picture-in-Picture and Chromecast buttons.

The full list is in Attributes.

Changing it with JavaScript

The attributes are live: change one and the player updates at once. Every attribute is also a property.

const player = document.querySelector('vega-player');
player.setAttribute('color-primary', '#ffffff');
player.playBtnSize = 'lg';

Optional: CSS for many players at once

You never need CSS, but the same colors are also CSS custom properties (--color-primary, --play-btn-color…), handy to theme every player of a site from one stylesheet. For deeper changes, internal elements are exposed as ::part() (controls, progress, time, play-button, cta…). Attributes win over CSS. See CSS variables & parts.

Fonts and icons inside the player

The player lives in a Shadow DOM, so page styles don’t leak in, and its interface uses the system font. Icon fonts used in play-btn-icon must be declared globally with @font-face. To change the font of the time display or the preview, use the optional ::part(time) and ::part(preview) hooks.