WHY RETAILERS NEED BRANDED VIDEO PLAYERS

Anything that can increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.

When businesses audit their brands, an often-overlooked element is the online video player (OVP). Most businesses today use video players on their web properties and apps, but many still don’t use branded ones. Perhaps the business is using a free player, or they simply didn’t realize their OVP had branding capabilities. Either way, generic players erode brand consistency and can potentially cost the business revenue.

If you’re not sure whether your provider offers branded players, take a moment to review the elements that should be customizable on any platform.

BRANDED VIDEO PLAYER ELEMENTS

Today’s online video players are built on HTML5, which means they can technically be customized as much as any other web object. However, for branding purposes, these elements generally fall into the following four categories.

• Colors. While color might be one of the first brand elements we think of, the video player may be one of the last places we apply it. Everything from the play button to the volume control to the progress bar can be customized to your brand colors.
• Fonts. Outside of Comic Sans, most of us probably never think about typography. But even if we can’t tell the difference between Helvetica and Arial, we would all notice if the McDonald’s “M” was suddenly in Times New Roman. The same applies to your player’s runtime and hover text—the wrong font could disrupt the brand experience.
• Icons. Beyond logos, iconography is another important aspect of visual branding. Some brands prefer curved lines, others want straight edges. Some want delicate lines, others want bold, heavy line weights. As with colors and fonts, the play button, volume control, and any other player controls can be customized with different icons.
• Controls. For some brands, the player controls themselves could send the wrong message. Too many could create clutter for a minimalist brand, while some player layouts may feel foreign to viewers in other countries. That’s why it’s important to be able to adjust both the visibility and the position of your video player’s controls.

HOW TO BRAND A VIDEO PLAYER

Video players can be customized to your brand in a number of different ways. For example, your web developer could make some quick in-line edits to the CSS of the web page. However, this isn’t the best approach, as those edits would only apply to one page and the player hosted on it.

To better control your branded video players, you need to manage them from within your video platform. And there are three primary ways to do that.

OUT-OF-THE-BOX PLATFORM OPTIONS

The best video platforms for retailers should offer several options in their interfaces to easily customize your video player. For example, Brightcove allows you to quickly adjust the following:

Unlike some tech solutions that provide preset palettes, most video platforms let you fully customize colors with your brand’s hex, HSV, or RGB values. That said, they typically don’t have out-of-the-box options to change the fonts of their players.

JSON EDITOR

Some platforms include a JSON editor where you can directly manipulate the player code. While this is typically the domain of experienced developers, there are a couple simple adjustments anyone can make to the Brightcove player. (Select a player to edit in Brightcove’s Player module, then select the JSON Editor).

• Remove the control bar. Because retailers want to keep the focus on their products, not the video experience, they often want to remove player controls completely. This is especially valuable for homepage players or other pages where you want looping videos that catch the eye without distracting from the purchase. All you need to do is add the property, "control_bar": false, and every control except the play button will be hidden.

• Stylize the play button. For brands that want to change how the play button reacts when you hover over it, Brightcove has two options. You can add a glow effect around the button, or you can make the button darken. Just add one of the following objects under the play_button property: "hover": "glow" or  "hover": "darken".

Note: When adding properties in JSON, be sure to close them and any preceding objects with a comma (,) unless directly followed by a close bracket (}). To prevent playback errors, the editor won’t accept invalid code and you won’t be able to save changes.

STYLE SHEETS

Most websites use Cascading Style Sheets (CSS) to set brand standards. They’re essentially plain text documents that follow a specific format to adjust colors, fonts, and icons for all elements on a web page.

Branded video players can also be managed through CSS, especially when you need to make more customizations than the platform provides natively. However, if you’re not a developer, consult with one before making any changes, as it requires knowledge of the proper syntax and values.

To make a CSS document, all you need is Notepad for Windows or TextEdit for Mac.

• Create a new document (for TextEdit, then select Format > Make Plain Text)
• Add your selectors, properties, and values
• Save as a CSS file (either by saving the file with the .css extension or changing filename later)

The Brightcove player can be customized with CSS by navigating to the Players module, then selecting Plugins > Stylesheets. You can upload your documents here, and the player will be branded accordingly anywhere it appears on your site. For those who lack developer resources, below are a couple simple customizations you can implement yourself.

CHANGE PLAYER FONTS

Most of the text on video players is very small (e.g., the runtime, hover text, etc.). So make changes with caution, and consider consulting a UX specialist if your brand standards don’t account for readability on different platforms. That said, to change the fonts across the player, create a CSS doc with just the following:

.video-js {

  font-family: ;

}

After font-family and between the colon (:) and semicolon (;), add the font of your choice. Bear in mind that browsers support different fonts, and CSS is designed with a fallback system. At minimum, reference a recent list of common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:

.video-js {

  font-family: Comic Sans MS, Comic Sans, cursive;

}

The default library of font families is limited, so you’ll need to add a class or source URL to the CSS doc for custom fonts. Consult your web developer to ensure you reference your brand’s font properly.

REMOVE ALL CONTROLS

For retailers who want to create web header players for looping product videos, removing the control and progress bars isn’t enough. They want to remove everything, including the big play button. To do this, all you need is another simple CSS doc.

.video-js .vjs-big-play-button {

  display: none;

}

.video-js .vjs-control-bar {

  display: none;

}

Also, make sure “Show title and description” is unselected in the Styling tab of your player. Otherwise, both will display at the top of your player by default.

SCRIPTS

Changing colors and fonts for branded video players is relatively easy because you’re editing existing attributes; you’re not changing what they do or adding new ones. To completely change a video player’s layout, you’ll have to use scripts.

While creating CSS docs can be relatively simple, Javascript isn’t something you can manipulate without development experience or assistance. If you have in-house resources to do so, check out our support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.