Sign up for free

Getting started with delivery provides you with powerful tools that enable you to deliver content to your users with great customization and branding.

Get started with player offers an in-house player that you can customize and utilize to give your users the best experience possible, in the least amount of effort.

The player is provided in various SDKs that you can find in the SDK catalog.

Branding your player

You can bring the player closer to your brand by adding logos and your brand colour scheme to the player. The process is possible from the dashboard and the API. You can navigate to the dashboard and play around with it, however, in this tutorial, we will focus on setting it up through the API.

Let's set the player controls color to purple (#800080) and add our branded logo.


In this example, we will be using the client libraries, however, if you prefer to use cURL or make the requests yourself, you are welcome to follow along with the API reference documentation.

Adding the client library & initializing

Let's add the client library to our code.

The client library takes your API key, which you can find here. Let's pass it the API key and initialize the client.

If wish to learn more about authentication and how it works, jump over to this page.

Make sure to install the modules / libraries on your environment beforehand.

Install client
const ApiVideoClient = require('')

Creating a player theme and adding a color

We have the code for the client initialization now, and we can proceed with creating a new player theme while adding a different color to our player controls.

Creating a new player theme
const playerThemeCreationPayload = {
  link: "rgba(128, 0, 128, 1)", // RGBA color for all controls. Default: rgba(255, 
const playerTheme = await client.playerThemes.create(playerThemeCreationPayload);  

The following code will give us this effect:

Showing customized player UI

The response that you should expect will contain the playerId that we will use in the next step.

  "backgroundBottom": "rgba(94, 95, 89, 1)",
  "backgroundText": "rgba(255, 255, 255, .95)",
  "backgroundTop": "rgba(72, 4, 45, 1)",
  "createdAt": "2020-01-13T10:09:17+00:00",
  "enableApi": false,
  "enableControls": false,
  "forceAutoplay": false,
  "forceLoop": false,
  "hideTitle": false,
  "link": "rgba(255, 0, 0, .95)",
  "linkActive": "rgba(255, 0, 0, .75)",
  "linkHover": "rgba(255, 255, 255, .75)",
  "playerId": "pl45d5vFFGrfdsdsd156dGhh",
  "text": "rgba(255, 255, 255, .95)",
  "trackBackground": "rgba(0, 0, 0, 0)",
  "trackPlayed": "rgba(255, 255, 255, .95)",
  "trackUnplayed": "rgba(255, 255, 255, .1)",
  "updatedAt": "2020-01-13T10:09:17+00:00"

Adding the logo

After you've created the player theme, you'll get a player theme id in the response. Let's add our company logo, to that player theme. We will utilize the /players/{player_id}/logo endpoint in order to do that.

First, find the image you would like to add to all of your videos. Make sure to find an image that doesn't exceed 200px x 100px, preferably in PNG format.

Uploading a player logo
const playerId = 'pl45d5vFFGrfdsdsd156dGhh'; // The unique identifier for the player.
const file = './company-logo.jpg'; // The name of the file you want to use for your logo.
const link = ''; // A public link that you want to advertise in your player. For example, you could add a link to your company. When a viewer clicks on your logo, they will be taken to this address.
const playerTheme = await client.playerThemes.uploadLogo(playerId, file, link); 

After you've added the image, it will look similar to this:

Showing a custom logo in the player

Assign the theme to a video

In order for the theme to apply by default when you play a video, you need to make sure that you assign the theme to a video. With the same client library, we can add a theme to a video that was already uploaded, or you can apply the theme as soon as you create the video object.

Let's assume that we are updating an existing video:

Adding a player theme to a video
// First install the "" npm package
// Documentation:
const client = new ApiVideoClient({ apiKey: "YOUR_API_KEY" });
const videoId = 'vi4k0jvEUuaTdRAEjQ4Jfrgz'; // The video ID for the video you want to update.
// define the value you want to update
const videoUpdatePayload = {
    playerId: "pl45d5vFFGrfdsdsd156dGhh", // The unique ID for the player you want to 
const updatedVideo = await client.videos.update(videoId, videoUpdatePayload);

Now we've applied our theme to this specific video, and we can implement the player on our frontend.

Implementing the player

After we branded our player, we can now implement the player on the frontend. In this example, we'll use the React player, however, you can use any of the available player SDKs.

Let's first install React and add the React Player SDK from

$ npm install --save

Once we have the React project and the React Player SDK added to the project, we can dive into our code and add the video component:

import ApiVideoPlayer from ''

// your code

<ApiVideoPlayer video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}  style={{
          width: '500px',
          height: '500px',
          }} />

Now you can see your awesome branding in action!

Was this page helpful?