# Core components Core components are the components that comprise the backbone of the player. This means that they are part of every player's instance, regardless of the usage of any of the player's plugins. ```txt root player flowplayer-ui flowplayer-header flowplayer-header-left-zone flowplayer-header-duration flowplayer-header-right-zone flowplayer-fullscreen-enter-icon flowplayer-fullscreen-exit-icon flowplayer-middle flowplayer-middle-left-zone flowplayer-rewind-icon flowplayer-middle-zone flowplayer-wait flowplayer-middle-buttons flowplayer-play-icon flowplayer-pause-icon flowplayer-middle-right-zone flowplayer-fast-forward-icon flowplayer-control flowplayer-control-buttons flowplayer-small-pause-icon flowplayer-small-play-icon flowplayer-live-status flowplayer-elapsed-time flowplayer-timeline-bar flowplayer-control-duration flowplayer-volume-control flowplayer-volume-icon flowplayer-volume-bar ``` Info Core components are all added to the DOM tree at the same time, which is when the top level component `flowplayer-ui` is appended to player’s root. Each component inside its constructor creates and appends its children components. Consequently, by overriding one component which is parent to other components, none of these children will be created, unless you do so. ### flowplayer-ui * `classlist` - fp-ui Top level component. All the other components are either children or descendants of this element. This is a container element with the same size as player. ### flowplayer-error * `classlist` - fp-error * `parent` - fp-ui An element that is appended when the `error` event is fired on the player and displays a message that describes the error. ## Header ### flowplayer-header * `classlist` - fp-header * `parent` - flowplayer-ui Container element that has the same width as player and its top edge is the same as the player's top edge. ### flowplayer-header-left-zone * `classlist` - fp-left * `parent` - flowplayer-header Container element that occupies the left half of its parent. ### flowplayer-header-duration * `classlist` - fp-duration * `parent` - flowplayer-header-left-zone Visible only when the autoplay option is set to false, before the player starts playing. `TextContent` property of the element is video's duration. ### flowplayer-header-right-zone * `classlist` - fp-right fp-togglable * `parent` - flowplayer-header Container element that occupies the right half of its parent. ### flowplayer-fullscreen-enter-icon * `classlist` - fp-fullscreen * `parent` - flowplayer-header-right-zone Fullscreen icon. ### flowplayer-fullscreen-exit-icon * `classlist` - fp-fullscreen-exit * `parent` - flowplayer-header-right-zone Fullscreen exit icon. ## Middle ### flowplayer-middle * `classlist` - fp-middle * `parent` - flowplayer-ui Container element that has the same width as the player and almost 3/4 of its height. Its top edge is the same as the bottom edge of `flowplayer-header`. Handles touch and click events that change the playback state of player or make the player fullscreen. ### flowplayer-middle-left-zone * `classlist` - fp-left-zone * `parent` - flowplayer-middle Container element that occupies the left 1/3 of its parent. Handles touch events that seek player's media backwards. ### flowplayer-rewind-icon * `classlist` - fp-rewind * `parent` - flowplayer-middle-left-zone Rewind icon. ### flowplayer-middle-zone * `classlist` - fp-middle-zone * `parent` - flowplayer-middle Container element that occupies the middle 1/3 of its parent. ### flowplayer-wait * `classlist` - fp-wait * `parent` - flowplayer-middle-zone The standard animation element that is visible when a player is either in waiting or seeking state. ### flowplayer-middle-buttons * `classlist` - fp-switch * `parent` - flowplayer-middle-zone Wraps up play/pause icon and switches opacity depending on playback state of the media. ### flowplayer-play_icon * `classlist` - fp-play * `parent` - flowplayer-middle-buttons Play icon. ### flowplayer-pause_icon * `classlist` - fp-pause * `parent` - flowplayer-middle-buttons Pause icon. ### flowplayer-middle-right-zone * `classlist` - fp-right-zone * `parent` - flowplayer-middle Container element that occupies the right 1/3 of its parent. Handles touch events that seek player's media forward. ### flowplayer-fast-forward-icon * `classlist` - fp-fast-rorward * `parent` - flowplayer-middle-right-zone Fast-forward icon. ## Controls ### flowplayer-control * `classlist` - fp-controls fp-togglable * `parent` - flowplayer-ui Container element that has the same width as the player and it's bottom edge is the same as the `flowplayer-middle` top edge. ### flowplayer-control-buttons * `classlist` - fp-btns fp-small-switch * `parent` - flowplayer-control Wraps up the play/pause icon and switches opacity depending on playback state of the media. ### flowplayer-small-pause-icon * `classlist` - fp-small-pause * `parent` - flowplayer-control-buttons Small pause icon. ### flowplayer-small-play-icon * `classlist` - fp-small-play * `parent` - flowplayer-control-buttons Small play icon. ### flowplayer-live-status * `classlist` - fp-live-status * `parent` - flowplayer-control Visible only on live streams. This element indicates if a stream is live or seeked, and, when clicked, forces media to go live. ### flowplayer-elapsed-time * `classlist` - fp-elapsed * `parent` - flowplayer-control Text content property of this element equals the elapsed time of the media that is played by the player. ### flowplayer-timeline-bar * `classlist` - fp-timeline fp-bar * `parent` - flowplayer-control Timeline bar. ### flowplayer-control-duration * `classlist` - fp-duration * `parent` - flowplayer-control The `textContent` property of this element, which equals the duration of the media that is played by the player. ### flowplayer-volume-control * `classlist` - fp-volume-control * `parent` - flowplayer-control Container element that wraps volume icon and volume bar. ### flowplayer-volume-icon * `classlist` - fp-volume-mute-unmute fp-volumebtn * `parent` - flowplayer-volume-control Volume icon. ### flowplayer-volume-bar * `classlist` - fp-volume * `parent` - flowplayer-volume-control Volume bar.