Customizing the Player V4 Appearance Using CSS

You can use Cascading Style Sheets (CSS) to customize the appearance of your Ooyala Player V4 for HTML5.

When to Use CSS to Customize the Player

Player V4 provides a default CSS file (html5-skin.min.css) with detailed settings that define the Player V4 user interface. These CSS settings are in addition to the skin.json file (see Customizing the Player V4 Skin with skin.json) that you can use to change mostly Player V4 behavioral settings. The JSON settings do not overlap the CSS settings.

What You Can Customize

The CSS allows you to configure Player V4 display settings (such as fonts, colors, icons, and measurements) for:
  • player elements (control bar, scrubber bar, buttons, spinner, slider, video quality)
  • state screens (start, pause, share, error)
  • ads (ad screen, overlays, panel)
  • discovery (screen, up next panel, countdown clock)
  • closed captions (screen, options)
  • responsive design (width, minimum width, height)
  • other settings (base settings, plug-ins, and so on)
Note: Before you make CSS changes, you should have expertise in working with CSS files.

Where to Look

Ooyala generates the html5-skin.min.css file using the Sass (http://sass-lang.com/) (SCSS) for CSS preprocessor and modular SCSS files stored in the source repository (https://github.com/ooyala/html5-skin/tree/stable/scss). This folder includes source files for:
  • base elements (including typography rules, fonts, icons, colors, measurements, enable/disable flags, etc.)
  • Player V4 components (buttons, forms, screens, other components)
  • Player V4 skin (default values pulled from /skin-plugin/config/skin.json)
Refer to the README (https://github.com/ooyala/html5-skin/blob/stable/README.md) for the latest description of the source files. For example, if you wanted to learn which CSS settings are associated with the scrubber bar, you could look at https://github.com/ooyala/html5-skin/blob/stable/scss/components/_scrubber-bar.scss

Ways to Configure CSS Settings

You can approach CSS configuration in several ways.

Make a Copy the Default File

You can copy the default html5-skin.min.css file (see Hosting Ooyala Player V4 for HTML5 Resources), make changes, host it, and the point to it from the web page on which you initialize the Player V4. For example: 
<link rel="stylesheet" href="url_where_hosted/my_custom.css"/>

Append Your Changes Using a Separate CSS

You can also make a separate CSS file that overrides or appends settings. For example: 
<link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
<link rel="stylesheet" href="url_where_hosted/my_custom_overrides.css"/>
The order on the page determines the winner when identical elements have different values. Specify the CSS file with the overrides after the default CSS on the HTML page. Where the elements are the same, the settings in the latter file prevail. For example:
html5-skin.min.css my_custom_overrides.css 
.innerWrapper .oo-control-bar {
    -moz-user-select: none;
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    font-size: 18px;
    height: 60px;
    list-style: outside none none;
    margin: 0;
    position: absolute;
    transition: bottom 0.5s ease 0s, height 0.25s ease 0s;
    width: 100%;
    z-index: 12500;
}
 
.innerWrapper .oo-control-bar {
    background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
    height: 50px;
}

Embed Inline Settings on the HTML Page

You can override CSS settings on an HTML page from which you launch Player V4. To specify in-line CSS settings in your code, add a <style> tag immediately below the <link> tag that points to the CSS file. For example, to change the color of the start screen text:

<link rel="stylesheet" href="//myserver.com/html5-skin.min.css"/>             
<style type='text/css'>
  .oo-player_skin .oo-startScreen .oo-state-screen-title
  Unknown macro: { color}
</style>

Modify the Source html5-skin SCSS Files

Although more involved, you might prefer to build your own CSS using a local copy of https://github.com/ooyala/html5-skin/blob/stable/README.md, modifying the source SCSS files, building the html5-skin.min.css file, hosting the built file, and point to it from the web page on which you initialize the Player V4.

Parent topic: Customizing the Player V4 Appearance

Was this article helpful?

Rate this article:
AAA