Try Free

Migrate Your Bitmovin Skin from JSON to CSS

With the 7th major release of the player, the default user interface has been completely redesigned and is built upon our new open-source UI framework. The new UI framework dramatically improves the possibilities for skinning the player and creating custom UI layouts. The old way of customizing the the player’s appearance with a JSON configuration has been removed and skin styling is now done directly with CSS, the standard way of styling web applications.

Because the new default UI in player V7 is built from scratch, with a brand new design and layout in a sleek and modern look, it does not make sense to translate old JSON configurations to the new UI. The new UI framework however ships with a second skin, the legacy skin that ports the old V6 UI design to the new UI framework. If you want to stick with the old UI design, you can follow this guide which shows how to use the legacy skin and how to translate old JSON configurations to CSS for the legacy skin on the new UI framework.

Legacy Skin

If you are a user of player V6 or earlier and want to upgrade to the V7 player while keeping the old V6 UI, the V7 UI framework contains a legacy skin which ports the old UI skin to the new framework. The V7 legacy skin looks similar to the old V6 skin, but is built upon the new UI framework and uses CSS instead of the old JSON configuration for styling.

Bitmovin Player V7 Legacy Skin

To use the legacy skin with the V7 player, you need to deactivate the built-in default skin and attach the legacy skin by yourself. This can be done with the following JavaScript code:

var config = {
  source: {
    ...
  },
  style: {
    ux: false // disable the built-in UI
  }
};

player.setup(config).then(function (player) {
  // Attach legacy UI skin to player
  bitmovin.playerui.UIManager.Factory.buildLegacyUI(player);
});

JSON to CSS Migration Table

If you have customized your player V6 skin with a JSON config, you need to translate the customizations to CSS styles of the player V7 UI framework. The following table lists properties of the JSON skin configuration and their corresponding CSS classes and properties in the V7 UI framework.

JSON Property CSS Class CSS Property
Logo
screenLogoImage .bmpui-ui-watermark background-image
screenLogoUrl No equivalent setting in new UI. URL can only be changed through a custom UI setup, clicking can be deactivated by setting the CSS pointer-events: none.
Player
screenBackgroundColor No equivalent setting in new UI.
Play Button Overlay
overlayPlayControl .bmpui-ui-hugeplaybacktogglebutton .bmpui-image background-image
overlayPlayControlHover .bmpui-ui-hugeplaybacktogglebutton .bmpui-image:hover background-image
Chromecast Button
panelCastControl .bmpui-ui-casttogglebutton background-image
panelCastControlHover .bmpui-ui-casttogglebutton:hover background-image
Play Button
panelPlayControl .bmpui-ui-playbacktogglebutton background-image
panelPlayControlHover .bmpui-ui-playbacktogglebutton:hover background-image
panelPauseControl .bmpui-ui-playbacktogglebutton.bmpui-on background-image
panelPauseControlHover .bmpui-ui-playbacktogglebutton.bmpui-on:hover background-image
Volume Button
panelMuteControl .bmpui-ui-volumetogglebutton background-image
panelMuteControlHover .bmpui-ui-volumetogglebutton:hover background-image
panelMuteOffControl .bmpui-ui-volumetogglebutton.bmpui-on background-image
panelMuteOffControlHover .bmpui-ui-volumetogglebutton.bmpui-on:hover background-image
Settings Button
panelSettingsControl .bmpui-ui-settingstogglebutton background-image
panelSettingsControlHover .bmpui-ui-settingstogglebutton:hover background-image
Full Screen Control
panelFullScreenControl .bmpui-ui-fullscreentogglebutton background-image
panelFullScreenControlHover .bmpui-ui-fullscreentogglebutton:hover background-image
panelExitFullScreenControl .bmpui-ui-fullscreentogglebutton.bmpui-on background-image
panelExitFullScreenControlHover .bmpui-ui-fullscreentogglebutton.bmpui-on:hover background-image
Control Bar
controlPanelHeight .bmpui-ui-controlbar height
controlPanelColor .bmpui-ui-controlbar background-color
Progress Bar
progressBarColor .bmpui-ui-seekbar .bmpui-seekbar-backdrop background-color
progressBufferingColor .bmpui-ui-seekbar .bmpui-seekbar-bufferlevel background-color
progressElapsedColor .bmpui-ui-seekbar .bmpui-seekbar-playbackposition background-color
Progress Pointer
progressBarPointer .bmpui-ui-seekbar .bmpui-seekbar-playbackposition-marker background-image
progressBarPointerHover .bmpui-ui-seekbar .bmpui-seekbar-playbackposition-marker:hover background-image
Elapsed Time Font Settings
elapsedTextFont .bmpui-ui-playbacktimelabel font-family
elapsedTextSize .bmpui-ui-playbacktimelabel font-size
elapsedTextColor .bmpui-ui-playbacktimelabel color
Settings Panel
settingsBgColor .bmpui-ui-settings-panel background-color
settingsCornerRadius .bmpui-ui-settings-panel border-radius
optionsBgColor .bmpui-ui-settings-panel .bmpui-ui-selectbox background-color
optionsFont .bmpui-ui-settings-panel .bmpui-ui-selectbox font-family
optionsSize .bmpui-ui-settings-panel .bmpui-ui-selectbox font-size
optionsTextColor .bmpui-ui-settings-panel .bmpui-ui-selectbox color
labelBgColor .bmpui-ui-settings-panel .bmpui-ui-label background-color
labelFont .bmpui-ui-settings-panel .bmpui-ui-label font-family
labelTextSize .bmpui-ui-settings-panel .bmpui-ui-label font-size
labelTextColor .bmpui-ui-settings-panel .bmpui-ui-label color
Volume Bar
volumeBarPanelColor .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider background-color
volumeBarLevelColor .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider .bmpui-seekbar-playbackposition background-color
volumeBarBackgroundColor .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider .bmpui-seekbar-backdrop background-color
Volume Level Pointer
volumePointer .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider .bmpui-seekbar-playbackposition-marker background-image
volumePointerHover .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider .bmpui-seekbar-playbackposition-marker:hover background-image

Example

The following example demonstrates how to translate a custom control bar background color from the old JSON config to a CSS style.

V6 JSON config:

{
  "controlPanelColor": "#123456"
}

V7 CSS style:

.bmpui-ui-controlbar {
  background-color: #123456;
}