🎨 Customize the video player

🎨 Customize the video player#

The video player uses CSS custom properties (variables) so you can restyle it from your project's theme without modifying the add-on's source code.

🎯 Override CSS variables#

Add the following to your project's SCSS (for example, in your policy package's theme file):

:root {
  // Player background when no preview image is available
  --video-player-fallback-bg: #222;

  // Play button icon size
  --video-player-icon-size: 68px;

  // Play button background
  --video-player-play-bg: rgba(0, 0, 0, 0.45);
  --video-player-play-bg-hover: rgba(0, 0, 0, 0.65);

  // Cancel/clear button color in the VideoURLWidget
  --video-url-widget-cancel: #ff0010;
}

📐 Available variables#

Variable	Default	Description
`--video-player-fallback-bg`	`#1a1a1a`	Background color when there's no preview image.
`--video-player-icon-size`	`68px`	Size of the play button icon.
`--video-player-play-bg`	`rgba(0, 0, 0, 0.45)`	Play button circle background.
`--video-player-play-bg-hover`	`rgba(0, 0, 0, 0.65)`	Play button background on hover/focus.
`--video-url-widget-cancel`	`#ff0010`	Color of the clear (✕) button in the URL widget.

🖼️ Aspect ratios#

The player defaults to a 16:9 aspect ratio. The aspect ratio is controlled via CSS classes on the .video-player container:

.video-player.aspect-16-9 { aspect-ratio: 16 / 9; }
.video-player.aspect-4-3  { aspect-ratio: 4 / 3; }

To add a custom aspect ratio, define a new class in your theme:

.video-player.aspect-21-9 { aspect-ratio: 21 / 9; }

📏 Block sizing#

The Video block and Video Player block support three size options through the sidebar:

Size	CSS class	Width
Large	`.large`	100%
Medium	`.medium`	50%
Small	`.small`	25%

Sizes respond to breakpoints. on mobile, all sizes render at 100%.

🎨 Theme variants#

The Video Player block supports a theme property in its styling schema. The theme is applied as a CSS class: .player-theme-{name}.

To style a custom theme, add rules in your SCSS:

.player-theme-dark {
  --video-player-fallback-bg: #000;
  --video-player-play-bg: rgba(255, 255, 255, 0.2);
}