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
background-color |
Background color of the call to action panel. |
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
background-color |
Background color of the header. |
height |
Height of the header. |
border-bottom |
Bottom border of the header. |
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
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. |
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
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 . |
This button supports the state
attribute selector, which can be used to apply different skins to different button states.
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
background-color |
Background color of the thumbnails area. |
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
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. |
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
width |
Width of the thumbnail. |
height |
Height of the thumbnail. |
border |
Border of the thumbnail. |
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.
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
color |
Text color of label. |
text-align |
Horizontal alignment of label. |
font-family |
Font name. |
font-size |
Font family. |
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
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. |
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
width |
Width of scroll track bar. |
background-color |
Background color of the track bar. |
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
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 . |
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"
.
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.
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 . |
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.
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;
}