Customise your video player

If you are signed in as an administrator, click on ‘Content’ and then on ‘Players’. Most accounts will only have a single player listed. All content (such as videos and playlists) will be presented within that same player to ensure a consistent appearance. In which case you should see a single player listed: click on that to view its details.

Within that editor you can adjust its appearance by clicking on that tab. Along with the various options to decide which controls to show, there are ones that let you adjust its basic colour palette:

We limit the options to the most often requested: styling the main video-play button (that appears on-load) and adjusting the control bar’s background. As stated within the settings, we normally use a round play button, whcih is white on a black, translucent background. The control bar also uses a black translucent background, using a gradient to blend in to the content behind it.

However you may prefer a square play button instead of a round one. Or you might want to change its colour. Or its border colour (you can even get rid of the border by choosing its colour as transparent). Or you might want to specify a colour behind the control bar. All of these options are available. Clicking one opens up a colour palette:

There are two ways to pick a colour. You can simply click on the palette (the cross in the top-right means no colour, so represents ‘transparent’). Or you can type in the colour directly in the box. We support both RGB and RGBA colours. That means you can use specify the level of transparency too: for example you could use 50% transparency to let the video behind show through (rather than use a solid colour).

While RGB and RGBA may sound intimidating, essentially they just represent a colour as either three (in the case of RGB) or four (in the case of RGBA) numbers. For example black is represented as rgb(0,0,0). White is rgb(255,255,255). And all the colours in between use 0-255 for each of the three values.

RGBA simply adds a fourth number: the opacity. So for example rgba(0,0,0,0.5) represents black (the 0,0,0 part) - but at just 50% opacity (the 0.5 part). So that allows the content behind to show through. Solid black would be rgba(0,0,0,1), since the 1 means 100%.

You can therefore simply enter the colour you want manually in the box, then click ‘Choose’ to select it. As you can see on the slider below, the mark is at 80% of the way along the bar and the value is indeed 0.8 for its opacity (within the RGBA value):

Need some inspiration? There are many online tools that will let you preview colours. For example this one from Adobe: https://color.adobe.com/create/color-wheel/.

All the major online tools should show you the colour in RGB/RGBA format.

Note that you can have multiple video players and configure each independently. The player essentially groups all the settings related to how your video is presented, so this gives you the ability to present different videos in different ways. For example you may have one player with Google Analytics configured and enabled, and another without it. Or one player with your logo shown in the corner and another without. You could set ones with different colours too. Then, to use a player, for each video you will see the available players listed. Simply pick the one you would like to present it in.

Why not try out our professional video hosting? If you have any other suggestions for features, we’d love to hear from you.

Updated: December 17, 2016