Contact Support | System Status
Page Contents

    Styling Players

    This topic provides an overview of the player styling settings that can be configured using the Players module.

    Some basic player styling options can be configured using the Players module. For complete customization of the Brightcove Player, you need to use Cascading Style Sheets (CSS). For more information on using CSS to customize the player appearance, see the Step-by-Step: Player Customization developer document.

    To configure the player Styling settings, follow these steps:

    1. Click Players in the navigation header to open the Players module.
    2. Click the link for the player you want to configure.
    3. Click Styling in the left navigation menu.
    style menu

    The following style settings can be configured:

    After any changes have been made, make sure to Publish the player for the changes to be visible.

    Playlist type

    The Playlist Type setting controls the how the playlist is displayed. This option will only appear if Player Type is set to Playlist as part of the Player Information properties. The following options are available:

    • Horizontal Playlist - Player will display a horizontal playlist
    • Vertical Playlist - Player will display a vertical playlist
    • Hidden Playlist - The playlist will be hidden

    Title and description

    Select Show title and description to display the video title and description on the player.

    video title

    Play button shape

    The Play Button Shape setting controls the shape of the play button. The following shapes are supported:

    • Circle
    • Square
    • Rectangle

    Play button position

    The Play Button Position setting controls the location of the play button within the player. The following positions are supported:

    • Center
    • Top Left
    • Top Right

    Color theme

    The Color Theme settings control the colors used in the player including the play/pause buttons, elapsed time and volume, captions, full screen and sharing icons.

    The following theme colors can be configured:

    • Main - Controls the color of the big play button, progress bar and volume level
    • Background - Controls the background color of the player controls
    • Icons - Controls the color of the arrow in the play button and the icons in the player control bar

    To change a theme color:

    1. Click a theme color to open the color picker.
    2. Click a color on the ride side of the control.
    3. Click in the square to select a shade of the desired color. Color can also be set using the hue, saturation, value (HSV) color model into the text control.
      icon color
    4. The slider below the color square can be used to set the opacity of the controls.
    5. Click outside of the color picker to modify another theme color.
    Selecting the Enable Sapphire Player Theme checkbox will set the play button and progress bar to a navy blue color.

    Logo Overlay

    A logo overlay is an image that appears on top of the player. A sample logo overlay appears below.

    To add a logo overlay:

    1. Set the Logo Overlay to On.
    2. Click Browse and select an overlay image (.png, .jpg, and .gif images are supported).
    3. (Optional) Enter a Logo URL. When the overlay is clicked, this URL will open in a new browser tab.
    4. Select a Logo Position for the overlay:
      • Bottom Right
      • Bottom Left
      • Top Right

    Page last updated on 07 Sep 2021