Video player

The video player is the rectangular area where the video content is displayed within the viewer.

If the dimensions of the video that is being played does not match the dimensions of the video player, the video content is centered within the video player’s rectangle display area.

The following CSS class selector controls the appearance of the video player:

.s7mixedmediaviewer .s7videoplayer

CSS properties of the video player

background-color

The background color of the video player.

The error message that is displayed if the system is unable to play the video can be localized. See Localization of user interface elements for more information.

Example - To make the video player transparent:

.s7mixedmediaviewer .s7videoplayer { 
 background-color: transparent; 
}

Captions are put into internal container inside the video player. The position of that container is controlled by supported WebVTT positioning operators. The caption text itself is inside that container; its style is controlled with the following CSS class selector:

.s7mixedmediaviewer .s7videoplayer .s7caption

CSS properties of captions

CSS property

Description

background-color

Caption text background.

color

Caption text color.

font-weight

Font weight.

font-size

Font size.

font-family

Font family.

Example - To set up caption text to be 14 pixel light gray Arial on a semi-transparent black background:

.s7mixedmediaviewer .s7videoplayer .s7caption { 
 background-color: rgba(0,0,0,0.75); 
 color: #e6e6e6; 
 font-weight: normal; 
 font-size: 14px; 
 font-family: Arial,Helvetica,sans-serif; 
}

The appearance of the buffering animation is controlled with the following CSS class selector:

.s7mixedmediaviewer .s7videoplayer .s7waiticon

CSS properties of wait icon

CSS property

Description

width

Animation icon width.

height

Animation icon height.

margin-left

Animation icon left margin, normally minus half of the icon's width.

margin-top

Animation icon top margin, normally minus half of the icon's height.

background-image

Knob artwork.

Example - To set up a buffering animation to be 101 pixels wide, 29 pixels high:

.s7mixedmediaviewer .s7videoplayer .s7waiticon { 
 width: 101px; 
 height: 29px; 
 margin-left: -50px; 
 margin-top: -15px; 
 background-image: url(images/sdk/busyicon.gif); 
}

On this page