Documentation Dynamic Media Viewers Reference Guide

Video player icon effect

Last update: January 26, 2022

CREATED FOR:

Developer
User

The Play icon is overlaid on the video view area. It displays when the video is paused, or when the end of the video is reached, and it also depends on the iconeffect parameter.

The appearance of the play icon is controlled with the following CSS class selector:

.s7mixedmediaviewer . s7videoplayer .s7iconeffect

CSS properties of the play icon

background-image	The displayed image for the play icon.
background-position	Position inside artwork sprite, if CSS sprites are used. See CSS Sprites.
width	The width of the play icon.
height	The height of the play icon.

Icon effect supports the state attribute selector. The selector state="play" is used when the video is paused in the middle of playback, and state="replay" is used when the play head is in the end of the stream.

Example

Set up a 100 x 100 pixel play icon.

.s7mixedmediaviewer .s7videoplayer .s7iconeffect {
 width: 100px;
 height: 100px;}
.s7mixedmediaviewer .s7videoplayer .s7iconeffect[state="play"] {
background-image: url(images/playIcon.png);
}
.s7mixedmediaviewer .s7videoplayer .s7iconeffect[state="replay"] {
background-image: url(images/replayIcon.png);
}

recommendation-more-help