Customizing the Player CSS

About

The Player user interface (UI) is created using HTML and CSS, whichs means that you can edit the UI according to your needs; for example, change the color of the scrubber, change the text font family, change the control icons, and much more.

This Demo is an example of how you can customzie the UI using the CSS.

And here are some of the classes you can override: Here is some of the classes you can override

Important!

  • The namespace for the default skin must be playkit.
  • The Player uses the same font family in all of its components. You can override it in the general parent class (.playkit-player-gui) or customize each component according to your preferences.
  • UI Componets may override your css modifications

Example - Customize UI Classes

Modify using style TAG
<style>     #player-gui > div.playkit-gui-area > div.playkit-bottom-bar > div.playkit-right-controls > div.playkit-control-button-container.playkit-control-fullscreen  {  background-color: #4CAF50;  }    #player-gui > div.playkit-gui-area > div.playkit-bottom-bar > div.playkit-right-controls > div.playkit-control-button-container.playkit-control-settings {    display: none;  } </style>

Configuring UI Elements form external css file

  • The css configuration can be also applied via css file that is hosted on your domain
"ui": {         "css": "https://path/my.css", },
  • Modifing the elements can be done programmatically in some more ways like querySelctor, gerElemetById and more

Example

document.querySelector("#player-gui > div.playkit-gui-area > div.playkit-bottom-bar > div.playkit-right-controls > div.playkit-control-button-container.playkit-control-fullscreen > div > button").style.display = "none" 

Player Classes List

Here's a list of the Player classes you can customize:

Buttons

Class NameDescription
.playkit-pre-playback-play-buttonThe background of the play button, before the Player begins playing
.playkit-icon-playThe Player icon, which is used in the bottom controllers and on the Player itself
.playkit-icon-start-overStart-over icon, shown at the end of the video
.playkit-control-buttonThis is a class that's attached to all of the buttons in the control container, so a change here will affect all of the buttons.
.playkit-icon-pausePause icon
.playkit-icon-playkit-icon-rewind-10Rewind icon
.playkit-icon-volume-baseThe left side of the volume icon
.playkit-icon-volume-wavesShown when not on mute
.playkit-icon-volume-muteShown when the Player is muted
.playkit-icon-languageLanguages selection icon
.playkit-icon-settingsSettings icon
.playkit-icon-maximizeMaximize icon
.playkit-icon-minimizeMinimize icon

Volume and Seek Bar

Class NameDescription
.playkit-volume-control-barPlaceholder for the volume level, use transform: rotate(90deg); for a horizontal volume bar. See Demo for usage example.
.playkit-volume-control-bar .playkit-barThe level background
.playkit-volume-control-bar .playkit-progressIndicates the audio level
.playkit-seek-barPlaceholder for the Player seek bar
.playkit-seek-bar .playkit-progress-barPlaceholder for the actual progress bar
.playkit-seek-bar .playkit-progress-bar .playkit-progressIndicates the progress of the video/audio
.playkit-seek-bar .playkit-progress-bar .playkit-progress .playkit-scrubberIndicates the end of the progress bar. When hovering over the seek bar, it will indicate the current position of the mouse on the seek bar
.playkit-seek-bar .playkit-progress-bar .playkit-virtual-progressWhen hovering and seeking to a future part of the media, this will show the progress until this point
.playkit-seek-bar .playkit-progress-bar .playkit-time-previewWhen hovering on the seek bar, this will show the current mouse position time

Overlays

Class NameDescription
.playkit-bottom-barPlaceholder of all the bottom controllers
.playkit-overlay .playkit-overlay-contentsOverlays container, for advanced captions settings (for example)
.playkit-overlay .playkit-error-overlayOverlay that pops up when there's an error

Spinner

Class nameDescription
.playkit-spinnerThe spinner implementation, which consists of several span child elements that you can remove using: .playkit-spinner span{ display: none;}
Was this article helpful?
Thank you for your feedback!
In This Article
Related Articles
Back to top

Never miss a thing!

Subscribe to our customer newsletter and our release notes updates, so you always get the best out of Kaltura.
Newsletter