It is possible to style the Player elements by using div classes as CSS class selectors. These classes are arranged in a hierarchical structure according to the Block Element Modifier (BEM) methodology

  • Block - a standalone entity that is meaningful on its own

  • Element - a part of a block that has no standalone meaning and is semantically tied to its block

  • Modifier - a flag on a block or element - use them to change appearance or behavior

The naming convention for this methodology is constructed as follows: "block__element-modifier". To demonstrate this in the context of the Player, consider the following example: "controlbar__volume-step". The Player's control bar is the entire bottom block that includes the play and stop buttons, the time seek bar, the subtitles and volume controls, etc. The volume controls are an element of the control bar block and the step modifier specifies which aspect of the volume controls will be styled. In this case the steps are the round volume notches that indicate the sound level of the video.



Consult the list of the Player's div classes below to find the desired block/element/modifier for styling (a description is provided where the indicated element is not obvious):


"controlbar" block - the controls along the bottom of the Player

  • controlbar__play
  • controlbar__stop
  • controlbar__pause

  • controlbar__overlay-container - refers to the time seek element of the control bar

    Adjust the "opacity" and "background-color" attributes to modify the color of this element.

  • controlbar__current-time
  • controlbar__duration
  • controlbar__dropdown-component - refers to both the quality button and the subtitles button (both of which use drop-down menus)
    • dropdown-component--qualities - specify the quality button
    • dropdown-component--subtitles - specify the subtitles button
    • dropdown-component__entry - refers to the options within the drop-down menus
    • dropdown-component__label - refers to the labels within the drop-down menus
  • controlbar__mute
  • controlbar__mute--active
  • controlbar__mute--inactive
  • controlbar__volumebar

  • controlbar__volumebar-step

    Adjust the "border-color" attribute to modify the color of this element.

  • controlbar__fullscreen


"top-controlbar" block - the control in the top right corner of the player that is used for downloading the video

This will not appear unless the specific video is enabled for download.

  • top-controlbar - the bar that goes across the top of the video when the download button appears
  • top-controlbar__dropdown-component - the div containing the download button (it extends downward when the drop-down menu items appear)
    • dropdown-component--download-list - the items in the drop-down menu that appears when hovering over the download button


"chapters" block - this appears when hovering over the seek bar and displays the thumbnails and chapter names for each chapter (if the video contains chapter markers)

  • chapters
  • chapters__element
  • chapters__text
  • chapters__duration
  • chapters__thumbnail
  • chapters__img
  • chapters__img--cropped


"related-videos" block - this appears when the video finishes playing and displays thumbnails for each related video (if the video is assigned a channel of related videos)

  • related-videos
  • related-videos__element
  • related-videos__text
  • related-videos__duration
  • related-videos__thumbnail
  • related-videos__img
  • related-videos__img--cropped


Helper Elements

  • big-play-button
  • pagination--left

  • pagination--right

    The pagination elements represent the arrow buttons to the left and right of related videos and chapters (if the video has these). You can either address them as is to affect both elements at once, or combine them with the "chapters" or "related-videos" class to affect the buttons for each block separately.