Setting Styles for Players
After you create a player, you can customize its appearance in many ways, so that the player look & feel matches and reinforces your organization's branding, the player content, the page design, or whatever other factors drive your player design requirements. The Edit Styles view lets you customize each component of your player in practically infinite combinations of colors and styles. You can also customize image components, background images, labels, and click-through URLs.
If you are a Brightcove Pro or Enterprise customer, you can also create custom player templates using BEML, Brightcove's XML player template feature.
Setting styles
To set or modify the visual appearance of a player:
- In the Publishing module, select the player.
- Click Styles in the action toolbar. The Edit Styles view opens:
- Select the components of your player that you want to edit. You can select a component either by clicking in the component in the canvas panel on the left, or by clicking the component's name in the Editable Areas panel on the right. When you select a component for editing, the component is highlighted in the canvas panel.
- Edit the selected components. The editable properties depend on the type of component, as described in more detail below.
- Click Save & Close when you are finished.
Setting global styles
When you set global styles for your player, you can select a background image and an overall color set and a theme for your player.
Setting global color and theme
To select a global color set and theme:
- In Editable Areas, select Global.
- Under Edit, click the Colors & Themes tab.
- Using the drop-down menus, select the theme and the color set you want to use. You can select one of two color sets (light or dark) and one of three themes (deluxe, flat, or minimal) to style your player.
Setting global background image
To select a global background image:
- Under Editable Areas, select Global.
- Under Edit, click the Image Selection tab.
- Click Upload to upload a new image file. After you upload an image, it becomes available in your media library.
- Click Change to switch from the currently assigned image to another image in your media library.
- Click X to de-select the currently assigned image.
Selecting images for image components
You can select image properties for your player. Depending on the layout of your player, you can set a background image and set display images for various components of the player. For example, the Tabbed Navigation player and Compact Tabbed Navigation player support setting an image for these player components:
- Top Image
- Bottom Image
Additionally, you can set click-through URLs and tooltip text for image components. Not all player templates support image components; see Player Templates for more information, including the dimensions for image components.
To set image properties:
- Under Editable Areas, select the image component you want to change.
- Under Edit, in the Image Selection tab:
- Click Upload to upload a new image file.
- Click Select to switch from the currently assigned image to another image in your media library.
- Click X to de-select the currently assigned image.
- Optionally, in the Click-through URL field, enter the URL to which you want to send viewers who click on the image. There is some checking for validity on URLs you enter and you will not be able to save a URL that doesn't pass the validation check.
- Optionally, in the Tooltip field, enter a text you want the viewer's browser to display when the viewer mouses over the image.
For best performance, images you use should be no larger than 1 MB. Images should also be an appropriate size for the placement of the image in the player template; see Player Templates for more information.
Setting component colors
You can select custom colors for most player components. A component can have different numbers of editable color settings, depending on what the component's function is and on any color set or theme you may have selected. For example, the Video Player: Video component has a single color setting, Background, which you use to set the background color displayed by the video display panel when the player isn't displaying other content. In contrast, other components can have much more complex design and behavior; for example, the Video List: List Item Boxes component has 10 different color settings:
- Gradient Top
- Gradient Middle
- Gradient Bottom
- Rollover Gradient Top
- Rollover Gradient Middle
- Rollover Gradient Bottom
- Selected Gradient Top
- Selected Gradient Middle
- Selected Gradient Bottom
- Border
These color settings let you customize each aspect of a list item box, with different color settings for its visual elements (border) and behavior states (normal, rollover, selected). Note: changing a player to use a global color set or theme resets all the color properties of all the components of the player to the default values for that color set or theme.
To select a color:
- In the Edit Styles page, under Editable Areas, select the component you want to style.
- Under Edit, click the Colors & Themes tab.
- Expand the component name and click the square color picker button:
A color palette opens:
Select the color you want either by clicking the color square or by typing the hexadecimal color code in the text field and pressing the Enter key. The color picker now displays the currently configured color.
Using gradients
Some components and themes let you use gradients – shading colors from the top to the middle to the bottom of the component. If you don't want gradient shading, set the gradient top, middle, and bottom to the same value. As an alternative, you may be able to switch to a theme that doesn't use gradients.
Note: changing a player to use a global color set or theme resets all the color properties of all the components of the player to the default values for that color set or theme.