Overriding Default Styles with CSS in Player V3 (Deprecated)

This small example shows how you can override style settings with your custom Cascading Style Sheets (CSS).

Important: Ooyala Player V3 is deprecated and is scheduled to be disabled on 2018-01-31. After that date, Player V3 will no longer play your video or audio content. Customers still using Player V3 need to migrate to Player V4 (see Migrating from Player V3 and Player Migration FAQ).
The following example shows how you can override some of the default styles by redefining the class names described in CSS Class Names in Player V3 (Deprecated).
Note: Be sure to use the !important directive (trailing the redefined properties) as highlighted below. This ensures that your redefinitions take priority over the defaults.
/* Ooyala-specific classes */

/* Background color of the play progress bar */
/* Use !important to force override */
.oo_playhead_progress {
        background:red !important;

/* Background color of the buffer progress bar */
/* Use !important to force override */
.oo_buffer_progress {
        background:#800 !important;

/* Put a picture of Super Mario under playhead ("slider") */
/* Use !important to force override */
.oo_playhead {
        background-image: url(https://some.url.to.an.image/images.jpg) !important;
The CSS styling above has the effect shown in this snippet:

To make your sure custom CSS file gets loaded in the player, see Linking to the CSS in Player V3 (Deprecated)

Was this article helpful?