Player Styling

 

No two websites are the same.  As businesses design and redesign their websites, they are always looking for that touch of individualism that will set them apart from their competition.  Whether it is a clean and modern look, an eye catching and unorthodox layout or somewhere in between, a website’s layout and design has a direct impact on how successful a tool it is.

So when it comes to embedding video players on your well designed site, why use a vanilla, out of the box player?  Brightcove provides an incredibly rich and easy to use player styling editor and that is exactly what I am going to discuss here.  By making a few quick style changes, you can match your player’s look and feel to your website’s overall design and company brand.

First off, this tool can be accessed in the Publishing Module under the Styles button.  To get started, there are some quick changes you can make to the player’s global color set.  You can find this option under Global -> Colors & Themes -> Color Set.  There is a Light and Dark color set that you can choose depending on the color scheme of the website and the overall look you are going for.  There is also a Theme option here which adjusts the gradients of the players.  Here you can select Deluxe for a deeper, richer look or either Flat or Minimal for a more basic look.

Getting deeper into customization, you can begin to style each and every element of your player template.  For some quick changes that go a long way, try and style the Playhead, Playhead Well and Buttons.  These subcategories are located under the VideoPlayer element.  You can quickly achieve a much more integrated feel for your player by making a few changes.

 

Another great way to really make your player “pop” is to style the player chrome.  The Player Chrome section is also under the VideoPlayer element.  The Player Chrome section has top, middle, bottom and border options so you can really get creative.  I’ve chosen some contrasting colors to really draw the reader's eye to my video player.

 

Beyond these quick changes, the sky is the limit.  More detailed instructions can be found on this great support document: support.brightcove.com/en/docs/setting-styles-players.  Every element of your player templates can be color schemed so have some fun and let your creative side shine through!  If you aren’t comfortable making changes to one of your live video players simply make a copy of it using the Duplicate button in the Publishing Module.  Then you can feel free to make radical design changes without the whole world seeing your experimentation.  When you are ready to swap in your newly designed player you can simply change the playerID value in the embed code or just re-embed your new Brightcove player.  Happy styling!