Showing results for 
Search instead for 
Do you mean 
If you don't find an answer, please click here to post your question.

Best Practices for Customizing Player V4

Started ‎05-31-2016 by
Modified ‎10-24-2016 by

Best Practices for Customizing Player V4

by blotner on ‎05-31-2016 02:53 PM - edited on ‎10-24-2016 10:41 AM by Ooyalan (2,448 Views)

The Ooyala V4 player is fully configurable and customizable, so be sure to take a moment and make it your own. Here are four simple changes that can make your player better fit your design and reflect your brand.


1. Match the color of your brand
The default color of the player is blue, but you can change the color of the playhead or other elements of the player to better match your company colors. If your logo is fire engine red, hot purple, or army green, then why not make your player match? You can even modify other color references to match or contrast your own color scheme. If you're modifying the JSON, you can do the following:

  • Look for the "scrubberBar" object and modify the array data with your own color preferences.
  • Change the color of the icons in the control bar by updating the color values in the controlBar >iconStyle object in skin.json.
  • Change the color of the play button on the startScreen by updating the color value in the startScreen>playIconStyle object in skin.json.


2. Add your logo and link
Adding your logo to the player ensures high visibility of your brand. It's especially beneficial when content is embedded on other sites or shared, as it will ensure viewers know where to go for more great videos, or to click the logo and immediately be directed back to your site. If you're modifying the JSON, you can do the following:

  • Update the image resources specified in html5-skin/assets/images. 
  • Look for the "watermark" object in skin.json and modify the array data with your own logo reference and url.


3. Select all the right features
The Ooyala player provides many features, and each of them can be referenced in the control bar. skin.json also allows you to set ordering, spacing, and even specify which features will be hidden in mobile view. Before publishing, be sure your player utilizes all of the features you want, and also provides the ordering and spacing that looks best.


4. Get creative
The Ooyala player makes advanced customizations and configurations simple by giving you control over all the player design elements. Changing the font, updating the controls background color or volume controls are all customizations that are simple but can have a big impact. You can completely change the UI even more by modifying the loading indicator, modifying the ads dialog, and doing many other things that will make the player your own.


There are many more ways to configure and customize the player, but even with just these basics, you've already made a big impact on the experience for your viewers. If you are looking for more help or guidance from Ooyala on how to improve your player experience, please check out other articles in the Community or reach us at