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.

IMPORTANT

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:

TIP

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:

TIP

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

NOTE

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now