New to Kendo UI for Vue? Start a free 30-day trial

Customizing Mediaplayer

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-media-player-border-width1px
Description
Border width of the mediaplayer.
$kendo-media-player-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the mediaplayer.
$kendo-media-player-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the mediaplayer.
$kendo-media-player-line-heightvar( --kendo-line-height, normal )
Description
Line height of the mediaplayer.
$kendo-media-player-bgvar( --kendo-component-bg, inherit )
Description
Background color of the mediaplayer.
$kendo-media-player-textvar( --kendo-component-text, inherit )
Description
Text color of the mediaplayer.
$kendo-media-player-bordervar( --kendo-component-border, inherit )
Description
Border color of the mediaplayer.
$kendo-media-player-overlay-bgif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Mediaplayer overlay background color.
$kendo-media-player-quality-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
Mediaplayer quality button border color.
$kendo-media-player-title-font-sizevar( --kendo-font-size-xl, inherit )
Description
Media player title font size.
$kendo-media-player-titlebar-padding-xmap.get( $kendo-spacing, 2 )
Description
Mediaplayer titlebar horizontal padding.
$kendo-media-player-titlebar-padding-ymap.get( $kendo-spacing, 2 )
Description
Mediaplayer titlebar vertical padding.
$kendo-media-player-titlebar-bgrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .4 )
Description
Mediaplayer titlebar background color.
$kendo-media-player-titlebar-text$kendo-media-player-bg
Description
Mediaplayer titlebar text color.

In this article

Not finding the help you need?