How to customize the Kaltura logo on the player using UIVars?

The following guide explores how KMC administrators can remove or change the Kaltura logo from the player control bar using UIVars. To learn about the custom logo plugin, please refer to The Universal Studio Information Guide.

Setting UIVars

Removing the default logo

How does one remove the small Kaltura Sun Icon from the player control bar?

  1. Copy the following UIVars string to the ”Paste your plug-in line here” box and then click the “go” button.
    kalturaLogo.visible=false&kalturaLogo.includeInLayout=false 
  2. Save and preview your player.

Changing the default logo

How does one change the small Kaltura Sun Icon to a custom icon?

The following instructions will guide users on how to replcae the Kaltura player logo.

  1. Copy the following UIVars string to the ”Paste your plug-in line here” box and then click the “go” button.
    kalturaLogo.visible=false&kalturaLogo.includeInLayout=false&mylogo.plugin=true&mylogo.className=Watermark&mylogo.width=30&mylogo.height=30&mylogo.watermarkPath=YOURLOGO&mylogo.watermarkClickPath=YOURURL&mylogo.position=after&mylogo.relativeTo=kalturaLogo 
  2. Scroll the variables list and find the mylogo.watermarkPath variable. Change the value of this variable (YOURLOGO) to the URL of your desired icon (swf, png or jpg file).
  3. Scroll down and find the mylogo.watermarkClickPath variable. Change the value of this variable (YOURURL) to the URL to which the user will be taken, when clicking on the icon.
  4. Save and preview your player.

Dynamically setting player logo

Occasionally, publishers will choose to set a logo based on an entry’s custom metadata field to allow for a dynamically branding the player based on the video being played.

To create a custom data driven logo follow these steps:

  1. Make sure that your account have custom data enabled (contact your project manager for more information).
  2. Add a new custom data field: dynamicLogoURL of type text. - This field will point to the URL of the image that will be used as the logo.
    Make sure the metadata field's system name (appears in the custom metadata fields table left column) has the right spelling and capitalization. 
  3. Add a new custom data field: dynamicLogoClickURL of type text. - This field will point to the URL to which the user will be taken when clicking on the logo.
    Make sure the metadata field's system name (appears in the custom metadata fields table left column) has the right spelling and capitalization. 
  4. Copy the following UIVars string to the ”Paste your plug-in line here” box and then click the “go” button:
     kalturaLogo.visible=false&kalturaLogo.includeInLayout=false&mylogo.plugin=true&mylogo.className=Watermark&mylogo.width=30&mylogo.height=30&mylogo.watermarkPath={mediaProxy.entryMetadata.dynamicLogoURL}&mylogo.watermarkClickPath={mediaProxy.entryMetadata.dynamicLogoClickURL}&mylogo.position=after&mylogo.relativeTo=kalturaLogo&requiredMetadataFields=true
  5. Save and preview your player.

 

Dynamically setting player watermark and click path

Occasionally, publishers will choose to set a watermark and click path based on a video’s custom metadata field to allow for a dynamically branding the player based on the video being played.

To create a custom data driven logo follow these steps:

  1. Make sure that your account have custom data enabled (contact your project manager for more information).
  2. Add a new custom data field: WatermarkUrl of type text. - This field will point to the URL of the image that will be used as the watermark.
    Make sure the metadata field's system name (appears in the custom metadata fields table left column) has the right spelling and capitalization.
  3. Add a new custom data field: WatermarkClickUrl of type text. - This field will point to the URL to which the user will be taken when clicking on the watermark.
    Make sure the metadata field's system name (appears in the custom metadata fields table left column) has the right spelling and capitalization.
  4. Copy the following UIVars string to the ”Paste your plug-in line here” box and then click the “go” button:
    watermark.watermarkPath={mediaProxy.entryMetadata.WatermarkUrl}&watermark.watermarkCustomPath={mediaProxy.entryMetadata.WatermarkClickUrl}&requiredMetadataFields=true
  5. Make sure the metadata fields of the video you are loading in the player contain correct and valid links.
  6. Save and preview your player with the desired video.

 

Be certain that the root of your domain has a valid allowing crossdomain.xml file.
Such as http://www.kaltura.com/crossdomain.xml. Otherwise, Flash cannot load assets from your domain.
To learn more about crossdomain.xml files read this article

Was this article helpful?
Thank you for your feedback!
User Icon

Thank you! Your comment has been submitted.

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