# Plugin components

[Core web components](/docs/wowza-flowplayer/player/web-components/core-components/) are associated with the main Wowza Flowplayer package and provide the building blocks to create the player's user interface. They define the essential components that make up the core player controls, such as volume, seek, play, pause, and fullscreen elements.

Plugin components extend the functionality of core components and allow you to customize plugin-specific UI elements. They hook into the parent core element and alter it to achieve a desired effect. For example, the speed or quality selection plugin components can be leveraged to add speed and quality options to the player's core control bar.

Info
Each of the plugin components on this page is associated with one of the [player plugins](/docs/wowza-flowplayer/plugins/advertising/). To define a plugin component, you have to configure the player with the associated plugin first.

## Advertising

### flowplayer-ad-ui

* `classlist` - fp-ad-ui
* `parent` - player's root element


A container component where ads are rendered.

### flowplayer-ad-controls

* `classlist` - fp-ad-controls
* `parent` - flowplayer-ad-ui


The control bar of the ad's user interface component.

### flowplayer-ad-countdown

* `classlist` - fp-ad-countdown
* `parent` - flowplayer-ad-ui


Displays the progress of a linear ad.

### flowplayer-ad-indicator

When used with the [Advertising](/docs/wowza-flowplayer/plugins/advertising/) plugin, this component displays an ad counter (ADS 1 / 3) in the bottom left of the player. The counter indicates how many ads remain until returning to the main video content.

* `classlist` - ad-indicator (added to the child `div` element)
* `parent` - flowplayer-ad-controls



```html
<flowplayer-ad-controls class="fp-ad-controls">
  <flowplayer-ad-indicator position="1" totals="1">
    <div class="ad-indicator fp-color-text">ADS 1 / 1</div>
  </flowplayer-ad-indicator>
</flowplayer-ad-controls>
<flowplayer-ad-countdown duration="10" remaining="7.5224329999999995" class="go" style="--ad-percent-previous:19.971; --ad-percent-complete:22.705;">
</flowplayer-ad-countdown>
```

With [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), you can add your own implementation and register a custom class to override this plugin component. This strategy can be useful when creating an `ad-countdown` div to display the number of seconds until playback continues. You can adjust the placement of the ad countdown with CSS.


```html
<flowplayer-ad-controls class="fp-ad-controls">
  <custom-ad-indicator>
    <div class="ad-counter ad-indicator fp-color-text">ADS 1 / 1</div>
  </custom-ad-indicator>
</flowplayer-ad-controls>
<flowplayer-ad-countdown duration="10" remaining="3.3467840000000004" class="go" style="--ad-percent-previous:54.733; --ad-percent-complete:60.171;">
</flowplayer-ad-countdown>
<div class="ad-countdown ad-indicator fp-color-text">Demo video will continue after 3 seconds</div>
```

Info
If you combine the ad countdown with the [float-on-scroll](/docs/wowza-flowplayer/plugins/float-on-scroll/) functionality, use CSS classes to hide the ad countdown while the player is minimized and in a popped-out state.

## AirPlay

### flowplayer-airplay-icon

AirPlay icon.

* `classlist` - fp-airplay
* `parent` - flowplayer-header-right-zone


## Audio

### flowplayer-audio-menu

Audio menu.

* `parent` - flowplayer-control


## Chromecast

### flowplayer-chromecast-icon

Chromecast icon.

* `classlist` - fp-cast-button
* `parent` - flowplayer-header-right-zone


## Endscreen

### flowplayer-endscreen-interstitial

A component rendered at the end of one video and displays multiple video recommendations.

* `classlist` - fp-endscreen
* `parent` - flowplayer-ui


## Playlist

### flowplayer-skip-previous-icon

Skip previous icon.

* `classlist` - fp-skip-prev
* `parent` - flowplayer-control-buttons


### flowplayer-skip-next-icon

Skip next icon.

* `classlist` - fp-skip-next
* `parent` - flowplayer-control-buttons


### flowplayer-playlist-interstitial

A component rendered between the end of one playlist video and before the start of the next playlist video. Only rendered if the [playlist's config properties](/docs/wowza-flowplayer/player/configure) `advance` and `delay` are true and larger than 0 respectively.

* `classlist` - fp-interstitial
* `parent` - flowplayer-middle


### flowplayer-playlist-controls

Playlist queue controller.

## Preview Thumbnails

### flowplayer-thumbnails-carousel

* `parent` - flowplayer-ui


A component that renders thumbnails after interactions with the timeline bar.

## Quality Selection

### flowplayer-quality-menu

Quality menu.

* `parent` - flowplayer-control


## Share

### flowplayer-share-menu

Share options menu.

* `parent` - flowplayer-header-left-zone


### flowplayer-facebook-icon

Facebook icon.

### flowplayer-twitter-icon

Twitter icon.

### flowplayer-embed-icon

Embed icon.

### flowplayer-link-icon

Link icon.

### flowplayer-share-icon

Share icon.

## Speed Selection

### flowplayer-speed-menu

Speed options menu.

* `parent` - flowplayer-control


## HTML Subtitles

### flowplayer-subtitles-menu

Subtitles menu.

* `parent` - flowplayer-control