Show Menu
TOPICS×

Skinning the player

You can use the following information to help you skin your player. For each visual construct, the corresponding behaviors is mentioned in default behavior.
The skinning details in this document are for the default UI elements that are created by the UI framework. If your player modified these elements, the skinning elements also need to be changed.

Container divs

Here are the styles for the container divs:
These divs are listed in the common-styles.css file.
Here are the styles for the main div:
Style Description
Main Div
.ptp-main-video-div-style
The style of the main div in which video plays.
.pip-mode-active
Used when the PIP mode is active.
The default behavior is videoBehavior .
Picture in Picture (PIP)
.ptp-pip-video-div
The style of the div in which PIP video plays.
.view-as-main-video
Applied to the initial PIP when it has been swapped and is displayed as the main video.
Multi-Video View
.ptp-multi-view-container
Is used in the multi-video view.
.ptp-multi-view-view
A common css style that is placed on each video in the multiview.
.multiview
When the container that houses each of the videos in multiview is in multiview.

Various Controls

Here are the styles for generic player controls:
These styles are listed in the default-controls.css file.
Style Description
ptp-control
Applicable to all the controls on the control bar except scrubber and space
ptp-input-slider
Input sliders
ptp-panel-header
Header of the panels
ptp-vertical-list-menu-item
Menu list in vertical style
ptp-fill-spacer
Space on control bar
ptp-hr-separator
Horizontal rule separator
ptp-panel-title
Title of the panels
ptp-panel-close-btn
Button for closing the panel
ptp-button-background
Background of all buttons
ptp-txt-control
Default styles for text controls.

Control Bar

Here are the styles for the control bar:
Style Description
ptp-control-bar (default behavior)
Applicable for the control bar

Feature Buttons

The letters in the following tables correspond to the letters in this illustration.
Here are the styles for the scrub bar:
Style (A) Description
ptp-scrub-bar
Scrub bar on control bar
ptp-scrub-bar .ptp-buffer-progress-bar
Buffer progress bar on the scrub bar
ptp-scrub-bar .ptp-seek-to-bar
State of the scrub bar when user is seeking on it
ptp-scrub-bar .ptp-playback-progress-bar
State of the scrub bar in normal playback
ptp-scrub-bar .ptp-progress-bar-play-head
Play head on scrub bar while playing
ptp-scrub-bar .ptp-ad-marker-bar
Ad marker bar
ptp-scrub-bar .ptp-ad-marker
Ad marker
The default behaviors are:
  • scrubBarBehavior
  • bufferProgressBarBehavior
  • playHeadBehavior
  • playProgressBarBehavior
  • seekToBarBehavior

Play/Pause Button

Here are the styles for the play/pause button:
Style (B) Description
ptp-btn-playpause
Play pause button on control bar.
ptp-btn-playpause.pause-state
ptp-btn-playpause in the pause state
ptp-btn-playpause.pause-state
ptp-btn-playpause in the play state
The default behavior is playPauseButtonBehavior .

Volume

Here are the styles to configure the volume button:
Style (C) Description
.ptp-volume-control
  • .expanded
  • .vertical
Volume control on control bar
  • When control is in expanded form
  • When control is in vertical form
ptp-btn-volume
Volume button on control bar
ptp-btn-volume.min-volume-state
When volume is in minimum state
ptp-btn-volume.mute-state
When volume is in mute state
The default behaviors are volumeBehavior and muteButtonBehavior .
Here are the styles for the volume slider:
Style (D) Description
.ptp-volume-slider
The volume slider.
.ptp-volume-hidden
The volume slider in a hidden state.
The default behavior is volumeSliderBehavior .

Rewind

Here is the style for the rewind button:
Style (E) Description
.ptp-btn-fastrewind
The rewind button on the control bar.
The default behavior is rewindButtonBehavior .

Time

Here is the style to display the remaining time on the control bar:
Style (F) Description
.ptp-txt-display-time
Displays the remaining time on the control bar
The default behavior is timeRemainingBehavior .

Fast Rewind

Here is the style for the fast rewind button:
Style (G) Description
.ptp-btn-fastrewind
The fast rewind button on the control bar.
The default behavior is fastRewindButtonBehavior .

Slow Rewind

Here is the style for the slow rewind button:
Style (H) Description
.ptp-btn-slowrewind
The slow rewind button on the control bar.
The default behavior is slowRewindButtonBehavior .

Slow Forward

Here is the style for the slow forward button:
Style (I) Description
.ptp-btn-slowforward
The slow forward button on the control bar.
The default behavior is slowForwardButtonBehavior .

Fast Forward

Here is the style for the fast forward button:
Style (J) Description
.ptp-btn-fastforward
The fast forward button on the control bar.
The default behavior is fastForwardButtonBehavior .

Audio Track

Here are the styles to configure the audio track:
Style Description
Audio Track Button (K)
.ptp-btn-audio-track
The audio track button on the control bar.
The default behavior is audioTrackButtonBehavior .
Audio Track Selection Panel (L)
.ptp-audio-track-selection-panel
The panel for selecting the audio track.
The default behavior is audioTrackSelectionPanelBehavior .
Audio Track Selection Header (M)
.ptp-audio-track-selection-header
The header for the ptp-audio-track-selection-panel .
Audio Track Selection Menu (N)
.ptp-audio-track-selection-menu
The menu items in the ptp-audio-track-selection-panel .

Sharing

Here are the styles to configure sharing:
Style Description
Social Media Sharing Button (O)
.ptp-btn-share-video
The social media share button on the control bar that will open up ptp-share-video-panel .
The default behavior is shareVideoButtonBehavior .
Sharing Video Panel (P)
.ptp-share-video-panel
The panel that displays the social share options.
The default behavior is shareVideoPanelBehavior .
Sharing Video Menu (Q)
.ptp-audio-track-selection-header
The header for the ptp-audio-track-selection-panel .
.share-video-panel-menu
The menu in ptp-share-video-panel that displays all the options to share content on social media.
.ptp-share-video-panel-menu-item
The menu item in the share-video-panel-menu .
.ptp-btn-share-video-facebook
The menu item that allows you to share content on Facebook.
.ptp-btn-share-video-twitter
The menu item that allows you to share content on Twitter.
.ptp-btn-share-video-google-plus
The menu item that allows you to share content on Google Plus.
.ptp-btn-share-video-linkedin
The menu item that allows you to share content on LinkedIn.

Closed Captions

Here are the styles to configure closed captions:
Style Description
Closed Captions Button (R)
.ptp-btn-closed-caption
The Closed Captions button on the control bar.
The default behavior is closedCaptionButtonBehavior .
.on-state
The captions have been enabled for a video.
Closed Captions Panel (S)
.ptp-closed-caption-panel
The panel for closed captions.
The default behavior is closedCaptionLanguagePanelBehavior .
Closed Captions Languages (T)
.ptp-closed-caption-language-panel:
The header for the ptp-audio-track-selection-panel .
.ptp-closed-caption-language-menu:
The menu in the closed captions panel.
Closed Captions Options (U)
.ptp-closed-caption-options-btn
The Options button in the closed captions options panel.
.ptp-closed-caption-options-panel
The Options panel on the closed captions panel.
.ptp-closed-caption-menu-item
The menu item in the closed captions panel.
.selected
In the selected state.
.ptp-closed-caption-done-btn
The Done button in the header of the closed captions options panel.
.ptp-closed-caption-options-menu
The Options menu in closed captions.
ptp-closed-caption-options-main-menu
The main menu for the closed caption options.
ptp-closed-caption-options-sub-menu
The sub menu for the closed caption options.
ptp-closed-caption-options-opacity-slider
The opacity slider for closed caption options.
ptp-closed-caption-options-menu-separator
The closed caption options separator.
ptp-closed-caption-options-menu-item
The closed caption Options menu item.
ptp-closed-caption-preview-panel
The closed caption preview panel.
ptp-closed-caption-options-footer
The closed caption options footer.
ptp-closed-caption-options-reset-button
The Reset button in the footer of the closed caption options panel.
ptp-closed-caption-options-apply-button
The Apply button in the footer of the closed caption options panel.
The default behavior is closedCaptionOptionsPanelBehavior .

More Options (V)

Here are the styles to configure additional options:
Style Description
.ptp-btn-more-options
The More Options button.
.ptp-btn-more-options.ptp-control-bar-btn
The ptp-btn-more-options that are used in control bar.
.ptp-more-options-control-panel
The More Options control panel.
.ptp-more-options-control-panel-menu
The More Options control panel menu.
.ptp-more-options-control-panel-menu-item
The More Options control panel menu item.
The default behavior is moreOptionsButtonBehavior .

PIP Button (W)

Here is the style for the PIP< button:
Style Description
.ptp-btn-pip
The PIP button on the control bar.
The default behavior is pipButtonBehavior .

Full Screen (X)

Here is the style to configure the full screen:
Style Description
.ptp-btn-fullscreen
The Full Screen button on control bar.
The default behavior is fullScreenButtonBehavior .

Trick Play (Y)

Here is the style to configure trick play:
Style Description
.ptp-control-bar-trick-play-rate
The trick rate display component in the control bar.
The default behavior is trickPlayRateDisplayBehavior .

Multiview (Z)

Here is the style to configure multiview:
Style Description
.ptp-btn-multiview
The MultiView button on control bar, and the initial state of Multiview button.
The default behavior is multiViewButtonBehavior .

Thumbnail

Here is the style to configure thumbnails:
Style Description
.ptp-progress-bar-thumb-nail
The progress bar of the thumbnails.
The default default behavior is thumbnailPreviewBehavior .

Error Messages

Here is the style to configure error messages:
Style Description
.ptp-error-message-panel
The panel that displays the error messages from player.
.ptp-error-message-panel-icon
The icon that is displayed on the panel when there is an error message.
.ptp-error-message-panel-message
The error message that is displayed.
The default behavior is errorMessagePanelBehavior .

Buffering Overlay

Here is the style to configure thumbnails:
Style Description
.ptp-buffering-overlay
The buffering overlay control.
The default overlay is bufferingOverlayBehavior .

Specific Selectors

Here is the style for the fast forward button:
Style Description
.ad-break
The state of the control panel while ad is being played.
Applies to the following:
  • .ptp-btn-fastforward
  • .ptp-btn-fastrewind
  • .ptp-btn-fastrewind
  • .ptp-btn-slowforward
  • .ptp-btn-slowforward
  • .ptp-btn-slowrewind
  • .ptp-btn-more-options
  • .ptp-btn-share-video
  • .ptp-btn-closed-caption
  • .ptp-btn-audio-track
  • .ptp-btn-pip
  • .ptp-btn-rewind
  • .ptp-scrub-bar
  • .ptp-seek-to-bar
.multi-view
The state of the control while in multiview.
Applies to the following:
  • .ptp-btn-fastforward
  • .ptp-btn-share-video
  • .ptp-btn-closed-caption
  • .ptp-btn-audio-track
.fullscreen-state
The player is in full screen mode.
Applies to the following:
  • .ptp-control-bar
  • .ptp-btn-fullscreen