How to Brand Your Video Player

WP Media Player lets you match the player to your visual identity without writing CSS. Set a brand color, tint the control bar, recolor the play button, drop in a logo watermark, and add custom CSS rules — all from the branding panel.

Set the Brand Colors

Go to WP Media Player > Settings > Branding. The page is split into a settings card on the left and a live interactive preview on the right. Every change you make in the settings card appears in the preview instantly.

The Brand Style accordion holds four color pickers:

• Brand Color: The primary color used across player controls. Defaults to black.
• Control Bar Color: The background color of the control bar. Defaults to a near-black with transparency. Leave empty to use the skin default.
• Play Button Color: The color of the large center play button icon. Defaults to black.
• Play Button Background Color: The background behind the center play button. Defaults to white.

All four pickers have a reset button that returns the value to its default.

Add a Logo Watermark

Open the Player Logo accordion. Upload a PNG or JPEG file — minimum 24 by 24 pixels. Once uploaded, three more fields appear:

• Logo Link (Optional): A URL the logo points to when clicked. Leave empty for a non-clickable logo.
• Logo Position: Choose top-right, top-left, bottom-right, or bottom-left.
• Logo Width: A slider from 0 to 300 pixels, in steps of 10. Defaults to 24 pixels.

The logo renders on every player that uses this branding configuration. It sits above the video content and does not interfere with controls.

Add Custom CSS

For anything the color pickers and logo settings do not cover, go to WP Media Player > Settings > General and scroll to Site-wide Custom CSS. Rules you add here are injected into every player on the site.

Use the player’s CSS class .ccpwpmp-player as a scope to avoid affecting other elements. Custom CSS added here overrides the preset styles but does not touch the branding color settings above.

What to Check

• The live preview in the branding panel reflects every color change immediately
• The logo appears in the correct corner at the width you set
• The branded player renders correctly on the frontend with the control bar colors and logo visible

Next Steps

Branding applies to every player that uses the global settings. To override the branding for a single video, open that video in the media editor and adjust the Branding section there. To control which skin and controls each preset uses, see how to create a custom player preset.