Configuring Brightcove Player Style (Look & Feel)

After you select a template for the basic layout of your Brightcove Player, you can customize its look-and-feel by choosing a theme, set of colors, fonts, and a background.


To further configure the design of your Player from the Brightcove Console after selecting a template:

  1. Go to the Player Styles tab:

    • If you’ve already created your Player:
      Select the Players tab, select the player, click the Edit button, and then choose the Styles tab.
      • - or -

    • If you are in the process of creating your Player:
      Click the Styles tab.

  2. Select basic options from the drop-down menus to change the Theme, Color Set, Font, and Background of the Player until you achieve a design you are satisfied with.

    The Player preview image instantly reflects your style choices to help you in your selection process. (Alternatively, you can click the Preview tab to view your edits.)


    3. To customize the color and pattern of your Player background: The Brightcove Console provides sample Photoshop background templates for each of the Players to use as a design base. Or, you can upload an original image to serve as the background of your Player.

    To upload an image to be used as a Background Image: Click the Open File Upload button in the bottom left corner, then select the image (non-progressive JPEG) that you want to use.

    To use your own custom background image: Select Background Image from the Background drop-down menu and select your image using the file picker.



  3. [Optional] Make more detailed color and font selections.


    4. Color Set:  advanced
    1. Click advanced, then select an item for which you want to edit the color (for example: icons, button text, rollover state).
    2. Click the small arrow in lower right corner to view the color picker.
    3. Select a color by clicking it or entering its hexadecimal color code. (Entering a hexadecimal value lets you exactly match a color, for example from the website where you will be inserting the Player.)
    If you click the advanced link for color set, you can edit the CSS directly by clicking the "CSS" button instead of using the color picker.

    To return to a default color: Click the little circular arrow that appears to the right of the item name.
    Font: advanced Click advanced, then select a font from either the Title or Body dropdown menu.
    Background:
    1. Click the small arrow in lower right corner to view the color picker.
    2. Then, select a background color by clicking it or entering its hexadecimal color code. (Entering a hexadecimal value lets you exactly match a color, for example from the website where you will be inserting the Player.)

  4. Click Save when you have finished making your changes.

See also: