Control bar

The control bar is the rectangular area that contains and sits behind all the UI controls available for the video viewer, such as the play/pause button and volume controls.

The control bar always takes the entire available viewer width. It is possible to change its color, height, and vertical position by CSS, relative to the video viewer container.

The following CSS class selector controls the appearance of the control bar:

.s7videoviewer .s7controlbar

CSS properties of the control bar


Position from the top border, including padding.


Position from the bottom border, including padding.


Height of the control bar.


Background color of the control bar.


To set up a video viewer with a gray control bar that is 30 pixels tall and sits at the top of the video viewer container.

.s7videoviewer .s7controlbar {
position: absolute;
top: 0px;
height: 30px;
background-color: rgb(51, 51, 51);

On this page