Visual tab

Read the following guide to learn the Visual tab functionalities in the Player Studio. Under the Visual tab, administrators can change the look and feel of the player, such as adding a custom CSS, logo, change colors, and more.

Access the Player edit view

To learn how to access the Player's edit view, please see The Kaltura Player Studio Edit View.

Visual

Select the Visual Tab. Visual is denoted by a grouping of stars icon.

This tab provides some branding capabilities. It allows you to change colors, and backgrounds; set an external CSS; add a logo, watermark, and bumper; and set the schedule.  

Player color

Player color - customize the player color

#006EFA

Live color - All related buttons and Live indicators will be displayed in the selected color.

#E12536

Player background - The playback color will appear if the playback isn't in full size.

#000000

External CSS

Type a URL for the external CSS. The player will load the CSS file using this URL.

Example - The following CSS code will hide the Advance captions settings from the player.

 a.playkit-advanced-captions-menu-link {
display: none;}

Logo

1. Choose whether to use the Kaltura custom logo plugin. If you choose to enable the custom logo plugin, additional options display.
2. In the Logo image URL field, type the URL for the custom control bar logo image. The logo image URL can be obtained by right-clicking on an image and selecting "Copy image address". Recommended image size is 32x32 pixels.
3. In the Logo link field,
4. Set a logo URL. There are 2 types of logo URLs that you can set:
   • Click-through URL - This logo URL is the website address that is being referred to upon clicking on the logo image. Type the URL for the control bar logo to click through to. 
   • Dynamic logo URL - A dynamic logo URL is a website address that automatically changes based on what video is playing. For instance, if someone clicks on your logo while watching a video, the link can take them directly to that same video on another site, such as your MediaSpace video portal. To set up a dynamic logo link, type the URL and add {entryId} to the address, for example: https://mycompanymediaspace.com/media/{entryId}. The link updates according to the entry ID of the video being played. This feature boosts traffic and engagement on your MediaSpace video portal by guiding users back to your site from where they were initially watching the video.
5. In the Title field, type the title tooltip for the logo. The logo title will be displayed when hovering over the logo image.

Watermark

1. Choose whether a watermark is displayed. If you choose to enable the watermark, additional options display. 
2. In the Watermark image URL field, type a URL to be used as the watermark. 
3. In the Watermark link field, type a link to the watermark. 
4. In the Watermark position area, choose the position of the watermark - top right, bottom right, top left, or bottom left. 
5. Choose whether to display duration (seconds) and enter the seconds.

Error slate

By default, error messages display over a black background, as seen in our example below.

The Error slate setting allows you to set an alternative image to be used as a background for player error messages.

To set a background image:

1. Click the toggle to the right to display blue in the toggle.
   
2. In the Error slate image URL field, type a URL to be used as the alternative background image for player error messages. The provided image will be used as a background for all error slates. 
3. Click Save. The background for player error messages is now customized with your image. Below is an example of a customized error slate.
   

Bumper

You can choose to enable a bumper to be displayed before and / or after your content. The bumper is either attached to an entry (in which case, the External URL field should be left blank) or provided as an external URL (ie. filling in the External URL field).

To enable a bumper:

1. Click the toggle to the right to display blue in the toggle.

2. In the External URL field, type / paste in the video content URL to be used as a bumper. This is the URL of your video file that you want to be the bumper. You can use any URL, but here are ways to generate a link from some common sources:

Use a video file from your KMC:

1. Click on the entry in KMC.
2. On the left menu bar, click Flavors.
3. Click the 3 Dots menu on the right of the flavor you want to use.
4. Click Preview in the drop-down menu.
5. Right-click on the video, and then click the following according to what browser you're using: 
   • Chrome - click Copy Video Address 
   • Firefox - Copy Video Link
   • Microsoft Edge - click Copy Link
6. Paste it into the External URL field.

Use a video from Dropbox:

1. Copy the Dropbox link of your file.
2. Paste the link into the External URL field, but change the end of the link from '=0' to '=1' - this changes the URL from a 'show' to a 'download'.

Use a video from Google Drive:

1. Copy the 'share' link of your file (ie. the link for your file when sharing it).
2. Change the link from a "share" to a "download" link by using the Google Drive Direct Link Generator.
3. Paste the new, "download" link into the External URL field.

3. In the Click Through URL field, type in the URL of where you'd like the user to be redirected to when clicking on the bumper.

4. In the Position field, choose when the bumper will be played: Pre = 0, Post = 1, or Both = 0,-1.

• Enter 0 to display the bumper before the playback (default).
• Enter -1 to display the bumper after the playback.
• Enter 0,-1 to display the bumper before and after the playback.

To learn about the player's integration setup, please visit The Kaltura Player Studio Admin Guide - Integrations.