CSS Class Names in Player V3 (Deprecated)

For customization with Cascading Style Sheets (CSS), you need to use the same classnames as Ooyala's.

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

When developing your own custom player styles, use must the same CSS classnames that Ooyala uses. These classnames are shown below.

For information about linking your styles when you embed the player, see Linking to the CSS in Player V3 (Deprecated).

CSS Class Name

Ancilliary Classes

Description

.oo_promo

  Style of preview panel before the video is played
 

div.oo_start_button

Style and position of the play button on the promo screen

.oo_start_spinner

  Style for the spinner displayed before play button on the promo screen appears

.oo_spinner

  Style for the spinner displayed after the play is clicked but before the video starts

.oo_mini_controls

  Styles for the player in "small" mode (opposite of .oo_full_controls below). These styles must minimalize the controls.
 

.oo_scrubber

Style for the scrubber (seek bar)
 

.oo_scrubber_track

Style for the scrubber track
 

.oo_toolbar_item

Added to control buttons for consistency
 

.oo_currentTime

Style for current time
 

.oo_timeToLive

Style for duration count in live mode
 

.oo_duration

Style for duration count for VOD assets
 

.oo_playhead

Style for the playhead (the indicator on the scrubber of the position in the video)

.oo_full_controls

  Styles used when the player is in "full" mode (opposite of .oo_mini_controls above)
 

.vod .oo_scrubber

Style for the scrubber (seek bar) for VOD assets
 

.live .oo_scrubber

Style for the scrubber (seek bar) for live assets
 

.vod .oo_scrubber_track

Style for the scrubber track for VOD assets
 

.oo_currentTime

Style for current time
 

.oo_timeToLive

Style for duration count in live mode
 

.oo_duration

Style for duration count for VOD assets
 

.oo_toolbar_item

Added to control buttons for consistency
 

.oo_button_highlight

Style to highlight buttons to feedback on click/touch
 

.oo_playhead

Style for the playhead (the indicator on the scrubber of the position in the video)

.oo_controls

  Style and positioning of control bar
 

.live

 
 

.oo_controls_inner

Style and positioning of control bar
 

.oo_label

Style applied to any text in the controls (duration, time, and so on), for consistent styling
 

.oo_scrubber

Style for the portion of the scrubber track that has already played (that is, that portion to the left of the playhead).
 

.oo_playhead

Common style for any control button
 

.oo_scrubber_track

 
 

.vod .oo_scrubber_track

 
 

.live .oo_scrubber_track

 
 

.oo_progress

Common styling for progress bars - played and buffered
 

.oo_buffer_progress

Style for "buffered" portion of scrubber bar
 

.oo_playhead_progress

 
 

.oo_button

 
 

.oo_rewind

Style for rewind button
 

.oo_play

Style for play button
 

.oo_pause

Style for pause button
 

.oo_fullscreen

Style for fullscreen button
 

.oo_fullscreen_on

Style for fullscreen button when fullscreen is off (that is, the button to click to take you to fullscreen)
 

.oo_fullscreen_off

Style for fullscreen button when fullscreen is on (that is, the button to click to exit fullscreen)
 

.oo_live_indicator

Style of live video indicator
 

.oo_live_message

Style of live text indicator

.oo_ads_countdown

  Style of ad message text that appears during ad playback

.oo_end_screen

  Style of end screen panel, which appears after video finished

.oo_replay

  Style of replay button

해당 내용이 도움 되었습니까?