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
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__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__volumebar-step
Adjust the "border-color" attribute to modify the color of this element. |
"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. |
"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)
"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)
Helper Elements
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. |