Icon effect

The play icon is overlaid on the main 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:

.s7video360viewer . s7video360player .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. 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 - Setup a 100 x 100 pixel play icon.

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now