< See all demos

UI Styling

Learn how you can entirely control the styling of the player UI

Demo Source Code

The Bitmovin Player UI is independent of the Player’s core, which makes it easy to customize the Player’s appearance.



The UI is designed to be as flexible as possible. Here we are showing you a few ways you can adapt the UI to better fit the rest of your content.


Setup via configuration

Take control over the Player’s appearance, by creating your own custom UI with our Player UI Framework, which can be set via the configuration.

playerManaged.js js
const config = {
  key: '<YOUR PLAYER KEY HERE>',
  location: {
    ui: 'https://domain.tld/path/to/bitmovinplayer-ui.js',
    ui_css: 'styles/bitmovinplayer-ui.css',
  },
};

bitmovin.player('player-id').setup(config);

Dynamic UI loading

For full flexibility use our UIManager to dynamically change the UI of the Bitmovin Player, as shown in this example and by setting the configuration option ux: false.

This can be combined with a custom created UI too, allowing for an even more fine grained control of the UI.

externallyManaged.js js
var config = {
  key: '<YOUR PLAYER KEY HERE>',
  ui: false
};

var source = {
  dash: 'https://cdn.bitmovin.com/content/assets/sintel/sintel.mpd',
  hls: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
  poster: 'https://cdn.bitmovin.com/content/assets/sintel/poster.png'
};

var currentUiManager, isSmallscreen = false;
var playerContainer = document.getElementById('player-container');
var player = new bitmovin.player.Player(playerContainer, conf);

player.load(source).then(function () {
  currentUiManager = bitmovin.playerui.UIFactory.buildDefaultUI(player);
});

function toggleSmallScreenUI() {
  currentUiManager.release();
  if (!isSmallscreen) {
    currentUiManager = bitmovin.playerui.UIFactory.buildModernSmallScreenUI(player);
  } else {
    currentUiManager = bitmovin.playerui.UIFactory.buildDefaultUI(player);
  }
  isSmallscreen = !isSmallscreen;
}

Styling of single components

If you prefer to update just a few elements without having to build an entire UI, all elements can be restyled using CSS. The documentation provides a complete reference of all CSS classes used in the UI. You may even want to have a look at our SCSS source files.

In this demo we use this feature to dynamically change the background color of the seekbar.

cssOverloading.js js
function toGreen() {
  toggleColorClass('green', '.bmpui-seekbar-backdrop')
}

function toOrange() {
  toggleColorClass('orange', '.bmpui-seekbar-backdrop')
}

function toggleRedBufferLevel() {
  toggleColorClass('red', '.bmpui-seekbar-bufferlevel')
}

function toggleColorClass(colorClassName, elementClass) {
  var allElements = document.querySelectorAll(elementClass);
  allElements.forEach(function (element) {
    var hadClass = element.classList.contains(colorClassName);
    element.classList.remove('orange', 'green', 'red');
    if (!hadClass) {
      element.classList.add(colorClassName);
    }
  });
}

Ready to get started?

Access your free account today by signing up for a trial

Start your trial