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.

• 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
    

  

• 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.
  
  

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. 

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.

• 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:
• 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:

1.3 | Logo

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’.