About

CSS provides a way to customize the appearance of supported player plugins. This article shows how to add a CSS file to a player and lists the available customization options.

Before you start

Create a CSS file with the rules you want (see Available plugins and CSS properties below), and host it at a URL the player can access.

Add a CSS file to the player

1. In Player Studio, click the player you want to customize to open the settings.

   

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

   

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

   

4. Click Save.

Available plugins and CSS properties

Set each property on its plugin's class, which is playkit- followed by the property prefix.

For example, this rule makes quiz questions larger and easier to read:

.playkit-ivq {
  --ivq-question-font-size: 20px;
}

Interactive Video Quiz

CSS property	What it changes
--ivq-question-font-size	Question text size
--ivq-question-line-height	Space between lines in question text
--ivq-question-max-width	Maximum width of question text
--ivq-answer-font-size	Answer text size
--ivq-answer-line-height	Space between lines in answer text
--ivq-answer-border-radius	Corner shape of answer options
--ivq-textarea-font-size	Text size in open-question fields
--ivq-textarea-min-height	Minimum height of open-question fields
--ivq-textarea-max-height	Maximum height of open-question fields
--ivq-button-font-size	Text size on plugin buttons
--ivq-button-padding	Space inside plugin buttons
--ivq-button-border-radius	Corner shape of plugin buttons
--ivq-title-font-size	Title size on welcome and submit screens
--ivq-description-font-size	Description text size on welcome and submit screens
--ivq-popup-background	Popup background
--ivq-popup-blur	Blur behind the popup

Transcript

CSS property	What it changes
--transcript-caption-font-size	Caption text size
--transcript-caption-line-height	Space between caption lines
--transcript-caption-time-font-size	Caption timestamp size
--transcript-panel-padding	Space inside the panel
--transcript-panel-background	Panel background
--transcript-panel-blur	Blur behind the panel

Navigation

CSS property	What it changes
--navigation-item-title-font-size	Chapter title size
--navigation-item-title-line-height	Space between lines in chapter titles
--navigation-item-description-font-size	Item description size
--navigation-timestamp-font-size	Timestamp size
--navigation-item-padding	Space inside each item
--navigation-item-thumbnail-width	Thumbnail width
--navigation-panel-background	Panel background
--navigation-panel-blur	Blur behind the panel

Live Q&A

CSS property	What it changes
--qna-message-font-size	Message text size
--qna-message-line-height	Space between message lines
--qna-author-font-size	Author name size
--qna-timestamp-font-size	Timestamp size
--qna-input-font-size	Text size in the input field
--qna-input-min-height	Minimum height of the input field
--qna-input-padding	Space inside the input field
--qna-input-border-radius	Corner shape of the input field
--qna-panel-background	Panel background
--qna-panel-blur	Blur behind the panel