Call to action 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 css-properties-of-the-background-color-of-the-call-to-action-panel

background-color
Background color of the call to action panel.

Example 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 css-properties-of-the-call-to-action-panel-header

background-color
Background color of the header.
height
Height of the header.
border-bottom
Bottom border of the header.

Example example-1

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: css-properties-of-the-header-title-in-the-call-to-action-panel

color
Text color inside the banner.
font-size
Font size.
line-height
Line height.
font-family
Font family.
text-align
Alignment of text in the banner.
padding-left
Left padding.
padding-right
Right padding to allow space for the Replay button.

Example example-2

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: css-properties-of-the-close-button-in-the-call-to-action-panel

top
Position from the top of the header, including padding.
right
Position from the right of the header, including padding.
width
Button width.
height
Button height.
background-image
Image displayed for a given button state.
background-position

Position inside the artwork sprite, if CSS sprites are used.

See CSS Sprites.

NOTE
This button supports the state attribute selector, which can be used to apply different skins to different button states.

Example example-3

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: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

background-color
Background color of the thumbnails area.

Example example-4

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: css-properties-of-the-thumbcell-in-the-call-to-action-panel

margin

Size of the horizontal and vertical margin around each thumbnail.

Actual horizontal thumbnail spacing equals the sum of the left and right margin set for .s7thumbcell . The same rule also applies but to vertical spacing.

Example example-5

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: css-properties-of-the-thumbnail-in-the-call-to-action-panel

width
Width of the thumbnail.
height
Height of the thumbnail.
border
Border of the thumbnail.
NOTE
Thumbnail supports the state attribute selector, which can be used to apply different skins to different thumbnail states. In particular, state="selected" corresponds to the thumbnail for the image currently selected; state="default" corresponds to the rest of thumbnails; state="over" is used on mouse hover.

Example example-6

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: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

color
Text color of label.
text-align
Horizontal alignment of label.
font-family
Font name.
font-size
Font family.

Example example-7

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: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

width
Width of scroll bar.
top
Vertical scroll bar offset from the top of the thumbnails area.
bottom
Vertical scroll bar offset from the bottom of the thumbnails area.
right
Horizontal scroll bar offset from the right edge of the thumbnails area.

Example example-8

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 css-properties-of-the-scroll-track-bar

width
Width of scroll track bar.
background-color
Background color of the track bar.

Example example-9

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: css-properties-of-the-thumb-height-in-the-call-to-action-panel

width
Width of thumb.
height
Height of thumb.
padding-top
Vertical padding between the top of the track.
padding-bottom
Vertical padding between the bottom of the track.
border-radius
Radius of border.
background-color
Color of thumb.
background-image
Image displayed for a given thumb state.
background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites.

NOTE
Thumb supports the state attribute selector, which can be used to apply different skins to the following different thumb states: "up", "down", "over", and "disabled".

Example example-10

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: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

width
Width of button.
height
Height of button.
background-image
Image displayed for a given button state.
background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites.

NOTE
These buttons support the state attribute selector, which can be used to apply different skins to the following different thumb states: "up", "down", "over", and "disabled".

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

Example example-11

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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8