Bitmovin UI renders playback controls and overlays as DOM elements with predefined CSS class names (for example, .bmpui-seekbar and .bmpui-ui-uicontainer).
Using CSS overrides lets you:
- Customize colors, fonts, and sizes
- Align playback controls with your brand
- Improve accessibility and responsive behavior
- Change visual behavior at runtime
Example: larger seekbar and branded colors
/* Big seekbar font size */
.bmpui-seekbar.bigseek > * {
font-size: 3em;
}
/* Seekbar backdrop colors */
.bmpui-seekbar-backdrop.green {
background-color: #034728 !important;
}This makes seekbar elements larger and changes the seekbar backdrop color.
Example: base font defaults
.bmpui-ui-uicontainer {
font-family: "Roboto";
font-size: 16px;
}This sets a consistent font baseline across UI elements.
You can also update label and button text styling to signal UI states such as on/off transitions.
Related references
- UIConfig: Bitmovin UIConfig interface
- Bitmovin UI modules: Bitmovin UI modules
- UI factory variants: Bitmovin UI factory docs
- CSS class reference: Bitmovin CSS class reference