Call to action

The Call to action panel appears when the video ends and displays all interactive swatches associated with the particular video.

The panel consists of a header area showing the video title, a replay button in the upper-right corner, and actual interactive swatches shown as a scrollable grid. You can disable the panel using the callToActionRecap configuration attribute.

The call to action panel always takes the entire available viewer area.

The following CSS class selector controls the appearance of the background color in the call to action panel:

.s7interactivevideoviewer .s7calltoaction

CSS properties of the background color of the call to action panel

Example

To set up a call to action panel with dark gray background:

.s7interactivevideoviewer .s7calltoaction {
    background-color: #222222;
}

The following CSS class selector controls the appearance of the header in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7header

CSS properties of the call to action panel header

Example

To set up a header that is 70 pixels tall, with a dark gray background, and a slightly lighter gray two pixel border along the bottom:

.s7interactivevideoviewer .s7calltoaction .s7header {
    height: 70px;
    border-bottom: 2px solid #444444;
    background-color: #222222;
}

The following CSS class selector controls the appearance of the header title in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

CSS properties of the header title in the call to action panel:

Example

To set up a video title with a 70 pixel line height, 25 pixel font size, white color, and left aligned:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
    line-height: 70px;
    font-size: 25px;
    color: #ffffff;
    text-align: left;
}

The following CSS class selector controls the appearance of the close button in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

CSS properties of the close button in the call to action panel:

Example

To set up a replay button that is 28 x 28 pixels. The button must be positioned 20 pixels from the top and from the right edge of the header. And, it must display a different image for each of the four different button states; takes the artwork from the component’s sprite image:

.s7interactivevideoviewer .s7calltoaction .s7closebutton {
 top: 20px;
 right: 20px;
 background-size: 336px;
 width: 28px;
 height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
 background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
 background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
 background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
 background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
 background-position: -0px -1232px;
}

The following CSS class selector controls the appearance of the thumbnail grid view in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

CSS properties of the thumbnail grid view in the call to action panel:

Example

To set up a thumbnails area with a dark gray background:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
    background-color: #222222;
}

The following CSS class selector controls the appearance of the thumb cell in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

CSS properties of the thumb cell in the call to action panel:

Example

To set up horizontal spacing of 24 pixels and vertical spacing of 18 pixels:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
 margin-top: 9px;
 margin-bottom: 9px;
 margin-left: 12px;
 margin-right: 12px;
}

The following CSS class selector controls the appearance of the thumbnail in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7thumb

CSS properties of the thumbnail in the call to action panel:

Example

To set up thumbnails that are 94 x 100 pixels:

.s7interactivevideoviewer .s7calltoaction .s7thumb {
 width:94px;
 height:100px;
}

The following CSS class selector controls the appearance of the thumbnail label in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7label

CSS properties of the thumbnail label in the call to action panel:

Example

To set up labels that use a white color, be center-aligned 15 pixels, and use an Arial® font:

.s7interactivevideoviewer .s7calltoaction .s7label {
 text-align: center;
 color: #ffffff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
}

If there are more thumbnails than can fit vertically into view, thumbnails renders a vertical scroll bar on the right side. By default, the call to action panel renders a tiny vertical bar without thumb and scroll buttons. However, it is possible to customize the bar by altering the viewer CSS.

The following CSS class selector controls the appearance of the scroll bar area in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

CSS properties of the scroll bar area in the call to action panel:

Example

To set up a scroll bar that is 22 pixels wide and does not have any margin from the top, right, or bottom of the thumbnails area:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:22px;
}

The scroll bar track is the area between the top and bottom scroll bar buttons. The component automatically sets the position and height of the track.

The following CSS class selector controls the appearance of the scroll bar track in the call to action panel:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS properties of the scroll track bar

Example

To set up a scroll bar track that is 22 pixels wide and has a gray color:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:22px;
 background-color:#222222;
}

The scroll bar thumb moves vertically within the scroll track area. Its vertical position is fully controlled by the component logic; however, the thumb height does not dynamically change depending on the amount of content.

The following CSS class selector controls the appearance of the thumb height and other aspect:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS properties of the thumb height in the call to action panel:

Example

To set up a scroll bar thumb that is 6 x 167 pixels, has three pixel rounded corners, and a gray color:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
 width:6px;
 height:167px;
 background-color:#666666;
 background-image:none;
 border-radius:3px 3px 3px 3px;
}

The following CSS class selector controls the appearance of the top and bottom scroll buttons:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

It is not possible to position scroll buttons using CSS top, left, bottom, or right properties; the viewer logic positions them automatically. The call to action panel in the interactive video viewer does not use these buttons in the scroll bar, so their size is set to 0 pixels in the default CSS.

CSS properties of the top and bottom scroll buttons in the call to action panel:

The button tool tips can be localized. See Localization of user interface elements.

Example

Disable scroll buttons by setting their size to 0 and hiding them:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}