Introduction

This document provides a list of all the CSS classes used for the default Player skin, which can be used to customize the look & feel of Bitmovin Player. Since V7, skinning is purely CSS-based and the UI is built upon our open-source UI framework. Because this framework allows great flexibility in UI design, configuration and layout, this document only applies to the default skin, that is shipped with the Bitmovin Player.

Experienced developers may want to directly develop into the SCSS sources. Developers that want to build a custom UI are encouraged to read the technical documentation in the GitHub repository.

UI Container

The UI container is the root DOM element of the UI that contains all other UI elements. It is a div with class .bmpui-ui-uicontainer. It always reflects the player’s playback state through state classes and carries additional flags reflecting UI states. All of these classes can be used to adjust the UI to certain states, e.g. by showing or hiding certain elements that belong to certain states. For example if the player is in the finished state, it might make sense to hide the control bar and display a restart button instead.

Player States

This is the global state of the Player, which is always one of the following:

Flags

Responsive Layout

Since CSS media queries are only applicable to the document and not to the player element, they cannot be nicely used to dynamically adjust the UI layout based on the player size. To enable responsive layouts, the UI container attaches specific classes depending on the player size.

Font

The default font is set to sans-serif. To adjust the font, simply set the CSS font-family on the UI container. Similarly, set font-size to adjust the font size. All sizes in the UI are relative (specified in em units), so the size of the UI elements will scale with your font size.

.bmpui-ui-uicontainer {  
  font-family: 'Roboto';  
  font-size: 10pt;  
}

Style namespace

All styles of a skin are namespaced with a class on the UI container. The namespace class for the default skin is .bmpui-ui-skin-modern.

The namespace can be useful to reference multiple skin styles from a web page and switch between them. To just tweak the default style, you don’t need to take care about the namespace.

Example: Take a look at the following DOM excerpt:

<div id="bmpui-id-1" 
     class="bmpui-ui-uicontainer 
            bmpui-ui-skin-modern 
            bmpui-flexbox 
            bmpui-player-state-prepared 
            bmpui-fullscreen 
            bmpui-controls-hidden">
  ...
</div>

What does it tell us? It tells us that the default skin was used, that the browser that rendered this DOM supports flexbox, a source was loaded in the player but playback was not yet started, the player is in fullscreen mode, and the controls should be hidden. As a skinner, you can react to these states in CSS, e.g. by displaying a play button overlay that is only shown while playback has not yet been started, and by making sure that the controls (control bar, title bar) are not visible.

UI Layouts

The default skin provides different layouts for different use-cases. Styling of these layouts is done through sub-namespaces applied to the UI container (e.g. .bmpui-ui-uicontainer.bmpui-ui-skin-modern.bmpui-ui-skin-ads).

UI Elements

This section lists all elements of the default skin and their classes to style them. All classes are prefixed with bmpui- to avoid classname clashes with the websites where the player is embedded. Elements can either be functional UI components or plain DOM elements. Functional UI components are components of the UI framework and can be identified by the prefix ui- (e.g. .bmpui-ui-seekbar). They carry various additional state classes. Plain DOM elements are usually child elements of a component that make up the structure of the component. They do not have any functionality on their own and do not have the ui- class prefix identifier (e.g. .bmpui-seekbar-playbackposition).

All UI components can be hidden and will have the .bmpui-hidden class attached when they are, respectively should be, hidden.

Labels

Labels are components that display text. They do not have any additional state classes. Additional labels will be described in the following sections.

Buttons

Buttons trigger an action and come in two variations: buttons and toggle buttons. Toggle buttons switch between an on and off state, signaled by the .bmpui-on and .bmpui-off state classes. A freshly initialized button that has never been triggered is in neither state. Icons on the buttons are set with background-image properties.

Seek Bar

The seek bar is the component that displays the playback position and buffer level on a graphical timeline. It provides means to seek within the playback media and displays tumbnail previews at the seek target position.

Volume Slider

The volume slider is a subclass of the seek bar that makes partial use of seek bar’s functionality and shares the same class names of the inner elements. Styles must therefore be namespaced with the volumeslider class.

Control Bar

The control bar is the main component of the player and contains all important elements to control playback.

Title Bar

The title bar displays metadata about the current playback media.

Overlays

Overlays cover the whole player window. Depending on their functionality, they are above or below the playback controls layer.

Settings Panel

The settings panel opens when the settings toggle button is clicked and displays avialable options that the user can change.

Various

Ads

These special components are used for the ads UI, a second separate UI instance that is displayed while an ad is playing that permits the UI. The ads UI container is a .bmpui-ui-uicontainer with the additional .bmpui-ui-skin-ads class.

Animations

The default skin animates some components of the UI. The animations are just CSS transition or animationproperties, and can be easily discovered and inspected with a browser’s developer tools. To change or disable an animation, just overwrite the property of the appropriate class.

Disabling the animations of the play/pause overlay button can be done as follows:

// Disable the pulsate animation when the button is hovered and playback has not been started
.bmpui-ui-hugeplaybacktogglebutton .bmpui-image:hover {
  animation: none;
}
// Disable the fade-out animation when playback starts
.bmpui-ui-hugeplaybacktogglebutton.bmpui-on .bmpui-image {
  animation: none;
}
// Disable the fade-in animation when playback pauses
.bmpui-ui-hugeplaybacktogglebutton.bmpui-off .bmpui-image {
  animation: none;
}

Overriding Styles

To overwrite default styles with your own values, you can put them anywhere you would normally put CSS styles (i.e. external .css file or inline <style> block). When using blogging platforms or content management systems (e.g. WordPress), there is usually functionality or plugins for placing custom CSS styles available.

When overwriting CSS styles, you need to take care of CSS specificity. In CSS, the most specific CSS selector counts, and if your custom styles are not applied to the skin although the style definitions are correct, this is probably the reason to look out for. The Bitmovin Player is usually instanciated with a unique id of a div (e.g. <div id="player"></div>), and this id is usually specific enough to overwrite styles. The CSS for overwriting the font and disabling animations of the play button overlay (as shown in the sections above) would thus look like this:

#player .bmpui-ui-uicontainer {
  font-family: 'Roboto';
  font-size: 10pt;
}
#player .bmpui-ui-hugeplaybacktogglebutton .bmpui-image:hover {
  animation: none;
}
#player .bmpui-ui-hugeplaybacktogglebutton.bmpui-on .bmpui-image {
  animation: none;
}
#player .bmpui-ui-hugeplaybacktogglebutton.bmpui-off .bmpui-image {
  animation: none;
}

Styling Chromecast Receiver Apps

A URL to a CSS file can be passed to the player. The receiver app will load this CSS file to apply styling information. Details can be found in the Cast configuration documentation of the player.