Call to action call-to-action

O painel Call to action é exibido quando o vídeo termina e exibe todas as amostras interativas associadas ao vídeo específico.

O painel consiste em uma área de cabeçalho que mostra o título do vídeo, um botão de repetição no canto superior direito e amostras interativas reais exibidas como uma grade rolável. Você pode desativar o painel usando o atributo de configuração callToActionRecap.

O painel call to action sempre ocupa toda a área de visualização disponível.

O seletor de classe CSS a seguir controla a aparência da cor do plano de fundo no painel call to action:

.s7interactivevideoviewer .s7calltoaction

Propriedades CSS da cor de fundo do painel call to action css-properties-of-the-background-color-of-the-call-to-action-panel

Exemplo example

Para configurar um painel call to action com plano de fundo cinza escuro:

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

O seletor de classe CSS a seguir controla a aparência do cabeçalho no painel call to action:

.s7interactivevideoviewer .s7calltoaction .s7header

Propriedades CSS do cabeçalho do painel do call to action css-properties-of-the-call-to-action-panel-header

Exemplo example-1

Para configurar um cabeçalho com 70 pixels de altura, com um plano de fundo cinza escuro e uma borda de dois pixels cinza ligeiramente mais clara ao longo da parte inferior:

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

O seletor de classe CSS a seguir controla a aparência do título do cabeçalho no painel call to action:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

Propriedades CSS do título do cabeçalho no painel call to action: css-properties-of-the-header-title-in-the-call-to-action-panel

Exemplo example-2

Para configurar um título de vídeo com uma altura de linha de 70 pixels, tamanho da fonte de 25 pixels, cor branca e alinhado à esquerda:

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

O seletor de classe CSS a seguir controla a aparência do botão Fechar no painel call to action:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

Propriedades CSS do botão Fechar no painel call to action: css-properties-of-the-close-button-in-the-call-to-action-panel

Exemplo example-3

Para configurar um botão de repetição com 28 x 28 pixels. O botão deve ser posicionado 20 pixels entre a parte superior e a borda direita do cabeçalho. E deve exibir uma imagem diferente para cada um dos quatro estados de botão diferentes; tira o trabalho artístico da imagem gráfica do componente:

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

O seletor de classe CSS a seguir controla a aparência da exibição de grade de miniaturas no painel call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

Propriedades CSS da exibição de grade de miniaturas no painel call to action: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

Exemplo example-4

Para configurar uma área de miniaturas com um plano de fundo cinza escuro:

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

O seletor de classe CSS a seguir controla a aparência da célula de miniatura no painel call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Propriedades CSS da célula de miniatura no painel call to action: css-properties-of-the-thumbcell-in-the-call-to-action-panel

Exemplo example-5

Para configurar o espaçamento horizontal de 24 pixels e o espaçamento vertical de 18 pixels:

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

O seletor de classe CSS a seguir controla a aparência da miniatura no painel call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumb

Propriedades CSS da miniatura no painel call to action: css-properties-of-the-thumbnail-in-the-call-to-action-panel

Exemplo example-6

Para configurar miniaturas com 94 x 100 pixels:

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

O seletor de classe CSS a seguir controla a aparência do rótulo de miniatura no painel call to action:

.s7interactivevideoviewer .s7calltoaction .s7label

Propriedades CSS do rótulo de miniatura no painel call to action: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

Exemplo example-7

Para configurar rótulos que usem uma cor branca, sejam 15 pixels alinhados ao centro e usem uma fonte Arial®:

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

Se houver mais miniaturas que possam caber verticalmente na exibição, elas renderizarão uma barra de rolagem vertical no lado direito. Por padrão, o painel call to action renderiza uma pequena barra vertical sem botões de miniatura e de rolagem. No entanto, é possível personalizar a barra alterando o CSS do visualizador.

O seletor de classe CSS a seguir controla a aparência da área da barra de rolagem no painel call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

Propriedades CSS da área da barra de rolagem no painel call to action: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

Exemplo example-8

Para configurar uma barra de rolagem com 22 pixels de largura e que não tenha nenhuma margem na parte superior, direita ou inferior da área de miniaturas:

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

A faixa da barra de rolagem é a área entre os botões da barra de rolagem superior e inferior. O componente define automaticamente a posição e a altura da faixa.

O seletor de classe CSS a seguir controla a aparência da faixa da barra de rolagem no painel do call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propriedades CSS da barra de rastreamento de rolagem css-properties-of-the-scroll-track-bar

Exemplo example-9

Para configurar uma faixa de barra de rolagem com 22 pixels de largura e cor cinza:

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

A miniatura da barra de rolagem se move verticalmente dentro da área de rolagem da trilha. Sua posição vertical é totalmente controlada pela lógica do componente; no entanto, a altura da miniatura não muda dinamicamente dependendo da quantidade de conteúdo.

O seletor de classe CSS a seguir controla a aparência da altura da miniatura e de outro aspecto:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propriedades CSS da altura da miniatura no painel call to action: css-properties-of-the-thumb-height-in-the-call-to-action-panel

Exemplo example-10

Para configurar uma miniatura de barra de rolagem com 6 x 167 pixels, tem três cantos arredondados de pixel e uma cor cinza:

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

O seletor de classe CSS a seguir controla a aparência dos botões de rolagem superior e inferior:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Não é possível posicionar botões de rolagem usando propriedades CSS top, left, bottom ou right; a lógica do visualizador os posiciona automaticamente. O painel call to action no visualizador de vídeo interativo não usa esses botões na barra de rolagem, portanto, seu tamanho é definido como 0 pixels no CSS padrão.

Propriedades CSS dos botões de rolagem superior e inferior no painel call to action: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização de elementos da interface do usuário.

Exemplo example-11

Desative os botões de rolagem definindo seu tamanho como 0 e ocultando-os:

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