Custom player templates are available only for Brightcove Pro and Enterprise customers. If you are interested in upgrading your Brightcove account, please contact Brightcove for more information.
Using the Theme element in a player template, you can customize the look and feel of your custom Brightcove players. For a reference to Theme and Style elements, see the BEML DTD Reference.
Depending on the degree of customization you require, you can use the Theme element and Style elements to:
You can use the Theme element to set a theme for all visual components that allow for configurable themes. A theme can be set to one of the currently supported three themes: Deluxe, Flat, or Minimal. Set the theme in the Theme element using the name attribute:
<Theme name="Deluxe" />
You can use the style attribute in the Theme element to set an overall style for each theme to one of the two supported styles, Light or Dark:
<Theme name="Deluxe" style="Light" />
If a player template does not include a Theme element, then you will not be able to use the Publishing module to modify the styles of a player that is based on that player template.
As an alternative, you can set the overall style for a player template using an external CSS file. Use the style attribute in the Theme element to point to a CSS file that follows the structure of the CSS used in a player template:
<Theme name="Deluxe" style="http://myserver/customStyle.css" />
Your CSS file needs to follow the same pattern as the CSS used by standard player templates. You can download a zip file that contains the CSS for the components in the standard player templates. These CSS files show how ComboBox, List, TabBar, VideoDisplay, VideoPlayer, TextRegion, TileList, and MediaControls components are styled, using the Deluxe, Flat, and Minimal themes and the Light and Dark styles. You only need to include CSS for the visual components in the player for which you want to override the default style.
Bear in mind the Flash security constraints that limit a player's ability to interact with other domains. The domain that hosts your CSS file needs to include <allow-access-from domain="admin.brightcove.com" /> in its crossdomain.xml file.
A Theme element can include any number of Style child elements that contain inline CSS to apply to specific components or classes of components in a player. Each Style element must have a name or id attribute to specify to what components in the player the style values should be applied. The Style element also contains the CSS as a value contained within a <![CDATA[]]> tag. You can set a style for a class of components or for an individual component.
To set a style for a class of components, use the class attribute in the <Style /> element. For example, to change the color of all Label components, set class="Label":
<Theme name="Deluxe" style="Light">
<Style class="Label">
<![CDATA[
.bodyText {
active: #777777;
}
]]>
</Style>
</Theme>
In this case, the gray color value of #777777 would be applied to the bodyText of any instance of the Label class of component. You can set separate text styles for bodyText, titleText, or linkText elements.
To apply a color value to a single instance of a class, use the id attribute to specify the id of the component you want to style:
<Theme name="Deluxe" style="Light">
<Style id="mainTitle" >
<![CDATA[
.bodyText {
active: #777777;
}
]]>
</Style>
</Theme>
Elsewhere in the player template, you would specify a Label instance with an id attribute of "mainTitle":
<Label id="mainTitle" text="My Player" />
Each player template has a default style that is applied to labels. For example, the CSS for the Light version of this default label style looks like this:
.background {
color: #FFFFFF;
}
.bodyText {
active: #000000;
rollover: #000000;
selected: #000000;
disabled: #666666;
}
.linkText {
active: #777777;
rollover: #B0C645;
selected: #B0C645;
disabled: #AAAAAA;
}
.titleText {
active: #000000;
rollover: #000000;
selected: #000000;
disabled: #666666;
}
To override any of these colors in the default style, add a Style element with an id attribute of "default". For example:
<Style id="default">
<![CDATA[
.bodyText {
active: #FFFFFF;
}
]]>
</Style>
You can follow a similar approach to override the custom fonts used for label texts in a player. See Player fonts for details.
Learn more about the elements that make up a player template: