CSS customization

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