> This page is for mk.io.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://mediakind.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://mediakind.ferndocs.com/_mcp/server.

# MKPlayer customization

The `@mediakind/mkplayer-customui-plugin` lets you build and customize playback interfaces on top of Bitmovin Player UI V3.

Previously, MKPlayer supported a basic `ui: true | false` flag to show or hide the default playback UI. The MKCustomUI plugin extends this by enabling full layout, control, behavior, and styling customization.

## What you can do

* Build MKPlayer’s default-style UI

* Create fully custom playback UIs

* Configure UI behavior through `uiConfig`

* Use responsive UI variants for mobile and browser layouts

* Style playback controls using CSS class overrides

* Apply UI updates dynamically at runtime based on screen size, app state, and user context

## In this section

[](/mkio/reference/player-customization/installation-and-initialization)

### Install and initialize

Install the plugin, disable the default UI, and initialize MKPlayer and MKCustomUI.

[](/mkio/reference/player-customization/ui-configuration-and-variants)

### UI configuration and variants

Configure `uiConfig`, build responsive layouts, and use lifecycle events.

[](/mkio/reference/player-customization/mkcustomui-api)

### MKCustomUI API

Reference list of constructors and UI factory methods.

[](/mkio/reference/player-customization/css-customization)

### CSS customization

Apply CSS overrides for seekbars, typography, and branded visual styling.

## External references

* NPM package: @mediakind/mkplayer-customui-plugin

* API docs: MKCustomUI API reference

* Sample code: MKPlayerSamples custom UI example