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

# Install and initialize MKCustomUI

Use the MKCustomUI plugin to replace the default MKPlayer playback UI with a customizable UI built on Bitmovin Player UI V3.

## 1. Install the plugin

Install the package in your project:

```bash
npm install @mediakind/mkplayer-customui-plugin

```

## 2. Import the plugin

Import `MKCustomUI` from the plugin in your source code.

## 3. Disable the default player UI

Set `playerConfig.ui` to `false` when using MKCustomUI:

```js
const playerConfig = {
  ...otherConfigs,
  ui: false, // disable default Bitmovin UI
};

```

## 4. Initialize MKPlayer

Create the player instance with your video container and config:

```js
const player = new mkplayer.MKPlayer(videoContainer, playerConfig);

```

## 5. Initialize MKCustomUI

Create `MKCustomUI` with the initialized player instance:

```js
const mkCustomizeUI = new mkplayercustomuiPlugin.MKCustomUI(player);

```

## 6. Release an existing UI manager before rebuilding

If you rebuild or switch UI layouts dynamically, release the previous `uiManager` first:

```js
if (uiManager) {
  uiManager.release();
  uiManager = undefined;
}

```

This avoids duplicate controls and prevents memory leaks when switching UI variants.