What's new in Bitmovin Player UI v4
Experience the next version of our Bitmovin Player UI with an enhanced, modern design that delivers exceptional user experiences across all platforms.
Version 4 of our Bitmovin Player UI will become the default UI of Bitmovin Player on all platforms from the end of January 2026.
Our new Bitmovin Player UI version has a completely overhauled and modernized design language, with touch input and remote control devices in mind. This ranges from a fully redesigned settings panel to improved touch controls, allowing users to hide and show the User Interface.
We are excited to introduce version 4 of our Bitmovin Player UI, featuring a range of new features and enhancements. Here are some of the key highlights:
Refreshed Modern Design
Experience a completely updated visual design with modern styling, improved color schemes using white accent elements, and an enhanced icon system with 24x24px modern icons. The new design provides a cleaner, more professional appearance that adapts beautifully across all device types.
Enhanced Settings Panel
Navigate playback configuration with ease using our completely redesigned settings panel featuring dynamic navigation, interactive selection items, and improved remote control navigation support. It provides a more intuitive user experience compared to traditional select boxes.
Mobile-First Touch Interactions
Enjoy new touch interactions explicitly designed for mobile devices, including single-tap visibility toggle, double-tap skip functionality, and seamless safe-area support for modern smartphones with notched displays. These improvements ensure optimal usability across all touch-enabled devices.
Find all updates in our CHANGELOG
Give it a try (opt-in)
Experience the next version of our Bitmovin Player UI hands-on in your application today to unlock powerful new capabilities.
Web
You can enable the new version on web through a simple update of the PlayerConfig (requires Player v8.226.0 or higher):
const playerConfig = {
location: {
// Use the UI JS and CSS files either manually or through tools like https://www.jsdelivr.com
ui: 'https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/js/bitmovinplayer-ui.js',
ui_css: 'https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/css/bitmovinplayer-ui.css',
},
style: {
uiManagerFactory: (playerAPI, config) => {
// Use the new UIFactory method to build the UI
return new bitmovin.playerui.UIFactory.buildUI(playerAPI, config);
},
},
}
// Use the PlayerConfig as before
const player = new Player(container, playerConfig);
When using a Player version lower than v8.226.0, you can enable the new version by manually loading and initializing through the UIFactory:
<!-- Bitmovin Player UI JS -->
<script src='https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/js/bitmovinplayer-ui.js' type='text/javascript'></script>
<!-- Bitmovin Player UI CSS -->
<link href='https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/css/bitmovinplayer-ui.css' rel='stylesheet'>
const playerConfig = {
// Disable the default UI
ui: false,
}
const player = new Player(...);
const uiManager = bitmovin.playerui.UIFactory.buildUI(player);
Mobile (iOS & Android - including Android TV)
Opting in to the new Bitmovin Player UI on mobile platforms is just as easy as on the Web. You can enable it through a simple update of the PlayerConfig.
This requires iOS Player v3.68.0 and Android Player v3.90.0 or higher.
Override default styles
Our mobile SDKs include some default styles that clash with the new first-class safe area support of the new version. To workaround this, you also need to specify supplemental CSS files for iOS and Android.
Create a new file in your iOS/Android App with the following content or host it somewhere:
// Our default padding changed from 0.5em to 1em which needs to be overridden for mobile devices
.bmpui-ui-uicontainer .bmpui-ui-controlbar {
padding-bottom: max(1em, env(safe-area-inset-bottom)) !important;
padding-left: max(1em, env(safe-area-inset-left)) !important;
padding-right: max(1em, env(safe-area-inset-right)) !important;
}
.bmpui-ui-uicontainer .bmpui-ui-titlebar {
padding-top: max(1em, env(safe-area-inset-top)) !important;
padding-left: max(1em, env(safe-area-inset-left)) !important;
padding-right: max(1em, env(safe-area-inset-right)) !important;
}
Load the new Bitmovin Player UI
To load the new version in your application, utilize the following PlayerConfig options:
let userInterfaceConfig = BitmovinUserInterfaceConfig()
// Use the new UIFactory method to build the UI
userInterfaceConfig.uiManagerFactoryFunction = "bitmovin.playerui.UIFactory.buildSmallScreenUI"
let playerConfig = PlayerConfig()
playerConfig.styleConfig.userInterfaceConfig = userInterfaceConfig
// Use the UI JS and CSS files either manually or through tools like https://www.jsdelivr.com
playerConfig.styleConfig.playerUiJs = URL(string: "https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/js/bitmovinplayer-ui.js")!
playerConfig.styleConfig.playerUiCss = URL(string: "https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/css/bitmovinplayer-ui.css")!
// Use the additional css file which we created in the previous step
playerConfig.styleConfig.supplementalPlayerUiCss = Bundle.main.url(forResource: "ui-overrides", withExtension: "css")
// Use the PlayerConfig as before
let player = PlayerFactory.create(playerConfig: playerConfig)
val viewConfig = PlayerViewConfig(
uiConfig = UiConfig.WebUi(
// Use the UI JS and CSS files either manually or through tools like https://www.jsdelivr.com
jsLocation = "https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/js/bitmovinplayer-ui.js",
cssLocation = "https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/css/bitmovinplayer-ui.css",
supplementalCssLocation = "file:///android_asset/ui-overrides.css",
variant = Variant.Custom("bitmovin.playerui.UIFactory.buildSmallScreenUI")
)
)
// Use the PlayerViewConfig as before
val playerView = PlayerView(this, player, viewConfig)
We recommend downloading all files and including them in your app bundle instead of loading from a server. This improves initialization performance and will have them available offline.
Updated about 7 hours ago