Customize Quickplay Player

This guide covers UI customization for QuickplayPlayer and ContentPlayer. You can tune controls, error overlay behavior, top chrome content, and CSS variables without modifying bundled player code.

Configure controls options

Use controlsOptions to toggle optional controls and customize built-in error overlay copy and actions. Audio track selection, video quality, playback speed, and caption menus are built in and appear automatically when the stream supports them — no extra configuration is needed.

<QuickplayPlayer
  source={source}
  controlsOptions={{
    showPipButton: true,
    showCastButton: true,
    showCaptionsButton: true,
    showErrorOverlay: true,
    errorTitle: 'Something went wrong',
    errorMessage: "We couldn't play this video",
    errorPrimaryLabel: 'Try again',
    errorSecondaryLabel: 'Go back',
    onErrorPrimary: () => window.location.reload(),
    onErrorSecondary: () => window.history.back(),
  }}
/>

controlsOptions supports these fields:

Field	Type	Default	Description
showPipButton	boolean	false	Show the Picture-in-Picture button.
showCastButton	boolean	false	Show the Chromecast button.
showCaptionsButton	boolean	false	Show an inline captions toggle in addition to the captions menu.
showErrorOverlay	boolean	true	Show the built-in error overlay on playback failure.
errorTitle	string	—	Heading text for the error overlay.
errorMessage	string	—	Body text for the error overlay.
errorPrimaryLabel	string	—	Primary action button label.
errorSecondaryLabel	string	—	Secondary action button label.
onErrorPrimary	() => void	—	Callback for the primary error action button.
onErrorSecondary	() => void	—	Callback for the secondary error action button.

Replace the default top chrome

You can supply custom top overlay content through the top-chrome slot.

<QuickplayPlayer source={source}>
  <div slot="top-chrome" className="custom-header">
    <img src="/logo.png" alt="Company logo" />
    <div>
      <h1>Custom title</h1>
      <p>Custom metadata</p>
    </div>
  </div>
</QuickplayPlayer>

Apply CSS custom properties

The player exposes CSS variables so you can brand controls while keeping the underlying control implementation stable. Set these on the player's container or any ancestor in your stylesheet.

Variable	Default	Description
--media-primary-color	#ffffff	Icon and text fill color.
--media-secondary-color	transparent	Control bar background tint.
--media-accent-color	#0778D6	Progress bar fill and range thumb accent.
--media-font-family	Roboto, sans-serif	Font family for all player text.
--media-text-color	same as --media-primary-color	Main text color.
--media-menu-background	rgba(28,28,28,0.6)	Background for overlay menus.
--media-control-hover-background	transparent	Control hover background.
--media-range-track-height	4px	Height of the seek and volume track.
--media-range-thumb-height	16px	Seek and volume thumb height.
--media-range-thumb-width	16px	Seek and volume thumb width.
--media-range-thumb-border-radius	50%	Seek and volume thumb corner radius.
--media-tooltip-background	#252732	Tooltip background.
--media-tooltip-border-radius	4px	Tooltip corner radius.
--media-tooltip-padding	5px 10px	Tooltip padding.
--media-tooltip-font-size	12px	Tooltip font size.

Target a specific player instance with the className prop:

<QuickplayPlayer source={source} className="brand-player" />

Then set CSS variables on that class:

.brand-player {
  --media-primary-color: #ff6b00;
  --media-accent-color: #ff6b00;
  --media-font-family: 'Inter', sans-serif;
}

Target player elements when needed

For finer control, you can target media-chrome elements under .qp-player.

Note: Overriding internal media-chrome elements directly is not part of the stable public API and may break across minor releases. Prefer CSS custom properties where possible.

.qp-player media-play-button {
  width: 48px;
  height: 48px;
}

.qp-player media-fullscreen-button {
  display: none;
}

Next steps

Continue with feature-specific behavior and diagnostics.

• Add advanced playback options in Advanced usage
• Validate prop compatibility in API reference