Show Menu
TOPICS×

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:
.s7interactivevideoviewer .s7videoplayer

CSS properties of the video player
background-color
Background color of the main view.
You can localize the error message that displayed in cases where the system is unable to play the video.
Example - To set up a video viewer with the video player size set to 512 x 288 pixels.
.s7interactivevideoviewer .s7videoplayer{ 
background-color: transparent; 
}

Closed captions are put into an 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, and its style is controlled with the following CSS class selector:
.s7interactivevideoviewer .s7videoplayer .s7caption
CSS properties of closed captioning
background-color
Closed caption text background.
color
Close caption text color.
font-weight
Closed caption font weight.
font-size
Closed caption font size.
font-family
Closed caption font.

Example

To set up closed caption text to be 14 pixels, light gray, Arial, on a semi-transparent black background:
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .s7videoplayer .s7waiticon { 
 width: 101px; 
 height: 29px; 
 margin-left: -50px; 
 margin-top: -15px; 
 background-image: url(images/sdk/busyicon.gif); 
}