Customizing the Player V4 Appearance Using CSS
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)
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)
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.