About

The v7 player's controls, such as the play button, seek bar, and volume slider, are built with HTML and CSS. This means you can change how they look by adding your own CSS rules.

This article shows how to add CSS to the player, lists the classes you can target, and gives examples you can copy.

Before you start

Create a CSS file with the rules you want, and host it at a URL the player can access. You can start from the examples below.

Add CSS to the player

You can add CSS to the player in three ways. Player Studio works for most cases, and the other two are for developers who embed the player with code.

Add a CSS file in Player Studio

1. In Player Studio, select the player you want to customize.

   

   The player settings open.

2. In the left panel, select the Visual settings (stars) icon.

   

3. Select the External CSS checkbox, and enter the file URL in the CSS URL field.

   

4. Select Save.

Add a CSS file in the embed code

If you set up the player with code, add your CSS file URL to the ui section of the player configuration.

const config = {
  targetId: 'player-placeholder',
  provider: { partnerId: 123456 },
  ui: {
    css: 'https://path-to-your-custom-stylesheet.css'
  }
};
const player = KalturaPlayer.setup(config);

The css option takes one URL. To use more than one stylesheet, combine them into one file, or add @import url(...) rules to that file.

Add CSS to the page that hosts the player

If you embed the player with a dynamic embed, the player loads directly in a div on your page. In this case, you can add the player rules to your page's own stylesheet. This doesn't work for iframe embeds, because the page's CSS can't reach inside the iframe.

How the player classes work

All player classes start with playkit-, and they all sit inside the root class .playkit-player-gui. Start each rule with .playkit-player-gui so it only applies to the player, as in the examples below.

The player uses the same font in all its parts. To change the font everywhere, set it on .playkit-player-gui. To change it in one part only, set it on that part's class.

Player classes

Buttons

Seek bar

Volume control

Bottom bar and overlays

Loading spinner

Examples

Copy any of these rules into your CSS file, and change the values to match your brand. The images show the player before and after custom CSS is applied.

Before: V7 player with its default styling.

After: The same player with custom CSS applied to the control bar, seek bar, scrubber, and buttons.

Change the seek bar color

This rule makes the played part of the seek bar orange, with a white handle.

.playkit-player-gui .playkit-seek-bar .playkit-progress {
  background-color: #ff5500;
}
.playkit-player-gui .playkit-seek-bar .playkit-scrubber {
  background-color: #ffffff;
  border: 2px solid #ff5500;
}

Change the bottom bar background

This rule adds a dark gradient behind the bottom controls.

.playkit-player-gui .playkit-bottom-bar {
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

Change the font

This rule changes the font in all parts of the player.

.playkit-player-gui {
  font-family: Arial, sans-serif;
}

Replace the loading spinner with your logo

These rules hide the default spinner and show your own image instead.

/* Hide the default spinner */
.playkit-player-gui .playkit-spinner span {
  display: none;
}
/* Show your own image or animation */
.playkit-player-gui .playkit-spinner {
  background: url('https://example.com/custom-spinner.svg') center center no-repeat;
  background-size: contain;
}

Change the player colors in the embed code

If you set up the player with code, you can also change its main colors in the ui section of the player configuration, without a CSS file. For basic branding, start with these three colors in HEX format:

• primary
• live
• playerBackground

The player works out the lighter and darker shades from the colors you set.

const config = {
  targetId: 'player-placeholder',
  provider: { partnerId: 123456 },
  ui: {
    userTheme: {
      colors: {
        primary: '#da3633',
        live: '#ffff00',
        playerBackground: '#ffa500'
      }
    }
  }
};
const player = KalturaPlayer.setup(config);