Skins and Player Versions

In this topic, you will learn about the differences between three Brightcove Player skins, one for Brightcove Player 1.x and the others for Brightcove Player 5.x and 6.x. In this document, since Brightcove Player 5.x and Brightcove Player 6.x can use the same skin, they will collectively be referred to as 5+ players.

Overview

The following summarizes the situation in regard to Brightcove Player skins:

  • Players created through Video Cloud Studio and edited in the Styling section, use the new skin, named sapphire.
  • Brightcove Player 5+ instances will, of course, use the skin, named luna.
  • Players that existed before the global update to version 5.x were left on the 1.x skin, named graphite.

Determine current skin

An easy way to determine if your player has the (graphite), (luna), or (sapphire) skin is to check the initial play button, often referred to by its CSS name, vjs-big-play-button.

  • The first screenshot below shows the 1.x skin with a rectangular big play button located near the top left of the player.
  • The second screenshot shows the 5+ skin with a circular big play button centered in the player. Also note that the title of the video is automatically displayed in the 5+ skin.
  • The third screenshot also shows the 5+ skin with a circular big play button centered in the player. Please note that the only difference between the Luna and the Sapphire skin is the play button color.
1x skin
5x skin
5x skin

A centered, circular button is not a guarantee of the 5+ skin as it is possible to use CSS to customize the 1.x button, but it is a likely indicator.

Documents exist for changing the appearance and styling of both the 1.x and 5+ skins. This table summarizes available documents.

5+ Skin Documentation 1.x Skin Documentation
Customize Player Appearance Horizontal Volume Control
Step-by-Step: Player Customization

Other documents on appearance and styling are not skin specific.