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
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
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
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
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
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
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
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
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
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
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
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
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;
}