Player Appearance


The Blue Billywig video player is completely customisable, with the ability to use your company colours and logos. Configuring the player appearance as well as many other settings can be found in the “Playout” menu.

This article will go over all the settings presented in the Playouts > Appearance menu. To get started:

  • Go to the Media Library
  • Click “Playouts” in the left sidebar
  • Select an existing playout (e.g. the “default” playout) or create a new one.
  • Head over to the “Appearance” tab.

player appearance settings

1.0 | General

Enter a title for the playout. The title of the playout will not be visible to viewers, but we recommend using a descriptive name. If the amount of playouts increases overtime, they will be easier to manage.

1.1 | Dimensions

Set the width and height of the player to:

  • be fully responsive;
  • have an absolute size (in pixels); or
  • cover a percentage of its container.

Responsive player sizing
To display your video content, a player needs to be embedded on your website or in your app (read more about embedding your content).
Enable “Responsive player sizing” to make sure the player covers the width of its container (in one of the upcoming settings it’s possible to only cover a percentage of the container). 

Enabling the ‘Responsive player sizing’ setting is recommended for responsive websites. 

Example:

For example: a player is embedded on a blogpost. When viewing the page on a desktop computer the blogpost has a width of 900px, but on a specific mobile device, the content width is scaled down to 400px. With ‘Responsive player sizing” enabled, the player will cover the width on desktop as well as on the mobile device.

Disabling the ‘Responsive player sizing’ offers the option to set a fixed width and height.

Aspect ratio
Use aspect ratio of video
The aspect ratio ratio of a player refers to the width in relation to its height. By default a player is set to take apply the aspect ratio of the video content that is displayed. As a result, the player will look at the width (either responsive to the container it’s placed in or an absolute size) and determine then determine the height based on the specific video content. 

Example:

A player that uses the aspect ratio of the video is embedded in a news article. More specifically, the player is placed in an HTML element with a width of 800px. When displaying a square video (1:1), the width will remain 800px with a height set to 800px. Similarly, when displaying a 16:9 movie trailer, the width will remain 800px, but the height will be set to 450px. 

Fixed aspect ratio
Use the dropdown menu to set your player to fixed aspect ratio: 21:9, 16:9, 4:3, 3:2, 1:1, 4:5 and 9:16. The player will not alter its height based on the video content.

When setting a fixed aspect ratio for the player, it’s likely that video’s aspect ratio is not exactly the same. The player decides to show empty space around the content and/or cut off part of the content. This is done based on the Fitmode settings (learn more about Fitmode to display content with a different aspect ratio)

Width
The width of the playout is set to cover 100% of the element it is placed in, but can also be set to a different percentage or a fixed width (in pixels).

Maximum width
Set a maximum width in pixels.

 

OVP Player Appearance Size

1.2 | Color

The color of the player and its skin can be configured to match your brand and website.

  • Background opacity
    By default set to 100% (not transparent). When set to 0%, the background color will not be visible.
  • Accent color
    Controls the accent color of widgets such as the progress bar and the icons in the progress bar.
  • Background color
    Controls the color of the control bar background, popup windows and the title display background. The opacity of this background can be adjusted with the Background opacity slider.
  • Playout background color
    Controls the background color of the player. We advise to choose a transparent background (by clicking the ‘x’) or to match this color to your website background in order to have minimum visible disruptions when a video is loading.

playout colors

Your logo can be displayed in any of the corners of the video player. Either choose a previously uploaded logo by clicking ‘select’ or click ‘upload’ to add a new logo.

Choose the position by clicking the dropdown menu under alignment.

Direct viewers to a webpage when clicked by adding a ‘Click URL’.

playout logo settings

Was this article helpful?

Related Articles

Contact Support
Can't find the answer you're looking for?
Contact Support