Player Appearance


The Blue Billywig video player is completely customizable, 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.

create or select a playout

  • Head over to the “Appearance” tab.

1.0 | General

  • Title
    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.
  • Button Type
    Select the button type for the “center controls” (learn more about setting the center controls). The following options are available:

    • Icon (default)
    • Round
    • Square
    • Border
    • Outline
    • Inversed

    button types

  • Corner Radius (px)
    Use this setting to apply “rounded corners” to your player by changing the “corner radius” (in pixels). The corner radius that is configured for this setting will be applied to related items as well. Default value is 10px, while the maximum value is 15px. Enter 0px to apply square corners.

    corner radius

1.1 | Dimensions

OVP Player Appearance Size

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. 

1.2 | Color

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

playout color

  • Accent color
    Controls the accent color of player elements such as the progress bar and the icons in the progress bar.
  • Highlight color
    Use this setting to optimize player accessibility. When using keyboard navigation, this color will be used to highlight the active element. If no color is set, the browser native focus color is used. In the example below, the highlight color is set to green to outline the ‘share’ button:highlight color
  • Playout background color
    Controls the background color of the player. We recommend to select a transparent background (by clicking the ‘x’) or to match this color to your website background.
    The playout background will only be visible in 2 cases:

    • When the video aspect ratio doesn’t match the player aspect ratio. When this happens, the fitmode determines the amount of playout background that is visible (read more about the fitmode settings);
    • Briefly when the mediaclip isn’t loaded yet.

See below how the accent color shows up in a player with a floating as well as a mounted control bar (read more about control bar placement):

Floating Control Bar

Mounted Control Bar:

 

Your logo can be displayed in the upper right or left corner of the video player.

  • Image
    Either choose a previously uploaded logo by clicking ‘select’ or click ‘upload’ to add a new logo.
  • Alignment
    Select the position (top left or top right) in the dropdown menu.
  • Click url
    Direct viewers to a webpage when clicked by adding a ‘Click URL’.

add a logo to a playout

Was this article helpful?

Related Articles

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