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).

Note: Ooyala Player V3 has been deprecated and is scheduled to be disabled. For details and alternatives, see the OVP Release Notes.
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?