行动动员 call-to-action
视频结束时，会显示行动号召面板，并显示与特定视频关联的所有交互式色板。
该面板由显示视频标题的标题区域、右上角的重播按钮以及显示为可滚动网格的实际交互式样本组成。 您可以使用callToActionRecap配置属性禁用面板。
行动号召面板始终采用整个可用查看器区域。
以下CSS类选择器控制行动号召面板中背景颜色的外观：
.s7interactivevideoviewer .s7calltoaction
行动号召面板的背景颜色的CSS属性 css-properties-of-the-background-color-of-the-call-to-action-panel
示例 example
要设置具有深灰色背景的行动号召面板，请执行以下操作：
.s7interactivevideoviewer .s7calltoaction {
background-color: #222222;
}
以下CSS类选择器控制行动号召面板中标头的外观：
.s7interactivevideoviewer .s7calltoaction .s7header
行动号召面板标题的CSS属性 css-properties-of-the-call-to-action-panel-header
示例 example-1
要设置一个高度为70像素的标题，该标题具有深灰色背景，底部有两个像素边框略浅灰色：
.s7interactivevideoviewer .s7calltoaction .s7header {
height: 70px;
border-bottom: 2px solid #444444;
background-color: #222222;
}
以下CSS类选择器控制行动号召面板中标题标题的外观：
.s7interactivevideoviewer .s7calltoaction .s7header .s7title
行动号召面板中标题标题的CSS属性： css-properties-of-the-header-title-in-the-call-to-action-panel
示例 example-2
要设置具有70像素行高、25像素字体大小、白色和左对齐的视频标题，请执行以下操作：
.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
line-height: 70px;
font-size: 25px;
color: #ffffff;
text-align: left;
}
以下CSS类选择器控制“行动号召”面板中关闭按钮的外观：
.s7interactivevideoviewer .s7calltoaction .s7closebutton
行动号召面板中关闭按钮的CSS属性： css-properties-of-the-close-button-in-the-call-to-action-panel
state属性选择器，可用于将不同的外观应用于不同的按钮状态。示例 example-3
设置28 x 28像素的重播按钮。 按钮的位置必须从页眉的顶部和右边缘开始20像素。 而且，它必须为四种不同的按钮状态分别显示不同的图像；从组件的Sprite图像中提取图稿：
.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;
}
以下CSS类选择器控制“行动号召”面板中缩略图网格视图的外观：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview
行动号召面板中缩略图网格视图的CSS属性： css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel
示例 example-4
要设置具有深灰色背景的缩略图区域：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
background-color: #222222;
}
以下CSS类选择器控制行动号召面板中缩略图单元格的外观：
.s7interactivevideoviewer .s7calltoaction .s7thumbcell
行动号召面板中缩略图单元格的CSS属性： css-properties-of-the-thumbcell-in-the-call-to-action-panel
示例 example-5
要设置24像素的水平间距和18像素的垂直间距，请执行以下操作：
.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
margin-top: 9px;
margin-bottom: 9px;
margin-left: 12px;
margin-right: 12px;
}
以下CSS类选择器控制行动号召面板中缩略图的外观：
.s7interactivevideoviewer .s7calltoaction .s7thumb
行动号召面板中缩略图的CSS属性： css-properties-of-the-thumbnail-in-the-call-to-action-panel
state属性选择器，该选择器可用于将不同的外观应用于不同的缩略图状态。 特别是，state="selected"对应于当前所选图像的缩略图；state="default"对应于其余缩略图；state="over"用于鼠标悬停操作。示例 example-6
要设置94 x 100像素的缩略图，请执行以下操作：
.s7interactivevideoviewer .s7calltoaction .s7thumb {
width:94px;
height:100px;
}
以下CSS类选择器控制“行动号召”面板中缩略图标签的外观：
.s7interactivevideoviewer .s7calltoaction .s7label
行动号召面板中缩略图标签的CSS属性： css-properties-of-the-thumbnail-label-in-the-call-to-action-panel
示例 example-7
要设置使用白色的标签，请居中对齐15像素，然后使用Arial®字体：
.s7interactivevideoviewer .s7calltoaction .s7label {
text-align: center;
color: #ffffff;
font-family: Arial,Helvetica,sans-serif;
font-size: 15px;
}
如果缩略图多于垂直放入视图的数量，则缩略图会在右侧呈现垂直滚动条。 默认情况下，“行动号召”面板呈现一个没有拇指和滚动按钮的小垂直条。 但是，可以通过更改查看器CSS来自定义栏。
以下CSS类选择器控制“行动号召”面板中滚动条区域的外观：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar
行动号召面板中滚动条区域的CSS属性： css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel
示例 example-8
要设置一个宽度为22像素的滚动条，并且该滚动条在缩略图区域的顶部、右侧或底部没有任何边距，请执行以下操作：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:22px;
}
滚动条轨道是上下滚动条按钮之间的区域。 组件会自动设置轨道的位置和高度。
以下CSS类选择器控制“行动号召”面板中滚动条轨道的外观：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack
滚动轨道条的CSS属性 css-properties-of-the-scroll-track-bar
示例 example-9
要设置宽度为22像素且颜色为灰色的滚动条轨道，请执行以下操作：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:22px;
background-color:#222222;
}
滚动条缩略图在滚动轨道区域内垂直移动。 其垂直位置完全由组件逻辑控制；但是，缩略图高度不会根据内容量动态变化。
以下CSS类选择器控制缩略图高度和其他方面的外观：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb
行动号召面板中缩略图高度的CSS属性： css-properties-of-the-thumb-height-in-the-call-to-action-panel
state属性选择器，该选择器可用于将不同的外观应用于以下不同的缩略图状态： "up"、"down"、"over"和"disabled"。示例 example-10
要设置一个像素为6 x 167的滚动条缩略图，它具有三个像素圆角，颜色为灰色，请执行以下操作：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
width:6px;
height:167px;
background-color:#666666;
background-image:none;
border-radius:3px 3px 3px 3px;
}
以下CSS类选择器控制顶部和底部滚动按钮的外观：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton
无法使用CSS top、left、bottom或right属性定位滚动按钮；查看器逻辑会自动定位它们。 交互式视频查看器中的“行动号召”面板不使用滚动条中的这些按钮，因此其大小在默认CSS中设置为0像素。
行动号召面板中顶部和底部滚动按钮的CSS属性： css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel
state属性选择器，可用于将不同的外观应用于以下不同的缩略图状态： "up"、"down"、"over"和"disabled"。可以本地化按钮工具提示。 请参阅用户界面元素的本地化。
示例 example-11
通过将滚动按钮的大小设置为0并隐藏它们来禁用滚动按钮：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
visibility: hidden;
width: 0px;
height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
visibility: hidden;
width: 0px;
height: 0px;
}