Chamada para ação call-to-action

O painel Chamada para ação é 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 a variável callToActionRecap atributo de configuração.

O painel de chamada para ação 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 chamada para ação:

.s7interactivevideoviewer .s7calltoaction

Propriedades CSS da cor de fundo do painel de chamada para ação css-properties-of-the-background-color-of-the-call-to-action-panel

background-color
Cor do plano de fundo do painel de chamada para ação.

Exemplo example

Para configurar um painel de chamada para ação 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 chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7header

Propriedades CSS do cabeçalho do painel de chamada para ação css-properties-of-the-call-to-action-panel-header

background-color
Cor de fundo do cabeçalho.
altura
Altura do cabeçalho.
border-bottom
Borda inferior do cabeçalho.

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 chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

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

cor
Cor do texto dentro do banner.
font-size
Tamanho da fonte.
altura da linha
Altura da linha.
font-family
Família da fonte.
text-align
Alinhamento do texto no banner.
preenchimento à esquerda
Preenchimento esquerdo.
preenchimento à direita
Preenchimento direito para permitir espaço para o botão Reproduzir.

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 de chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

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

top
Posição a partir da parte superior do cabeçalho, incluindo o preenchimento.
direita
Posição da direita do cabeçalho, incluindo o preenchimento.
largura
Largura do botão.
altura
Altura do botão.
background-image
Imagem exibida para um determinado estado de botão.
background-position

Posicione dentro da imagem do trabalho artístico, se as imagens CSS forem usadas.

Consulte Sprites CSS.

NOTE
Esse botão oferece suporte ao state seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

Exemplo example-3

Para configurar um botão de repetição com 28 x 28 pixels. O botão deve ser posicionado 20 pixels a partir da parte superior e da 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 Chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

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

background-color
Cor do plano de fundo da área de miniaturas.

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 chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Propriedades CSS da célula de miniatura no painel chamada para ação: css-properties-of-the-thumbcell-in-the-call-to-action-panel

margem

Tamanho da margem horizontal e vertical ao redor de cada miniatura.

O espaçamento de miniatura horizontal real é igual à soma das margens esquerda e direita definidas para .s7thumbcell . A mesma regra também se aplica, mas ao espaçamento vertical.

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 Chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7thumb

Propriedades CSS da miniatura no painel de chamada para ação: css-properties-of-the-thumbnail-in-the-call-to-action-panel

largura
Largura da miniatura.
altura
Altura da miniatura.
borda
Borda da miniatura.
NOTE
A miniatura suporta o state seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em especial, state="selected" corresponde à miniatura da imagem atualmente selecionada; state="default" corresponde ao restante das miniaturas; state="over" é usado ao passar o mouse.

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 Chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7label

Propriedades CSS do rótulo de miniatura no painel chamada para ação: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

cor
Cor do texto do rótulo.
text-align
Alinhamento horizontal do rótulo.
font-family
Nome da fonte.
font-size
Família da fonte.

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 de chamada para ação 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 chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

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

largura
Largura da barra de rolagem.
top
Deslocamento da barra de rolagem vertical a partir da parte superior da área de miniaturas.
bottom
Deslocamento da barra de rolagem vertical a partir da parte inferior da área de miniaturas.
direita
Deslocamento da barra de rolagem horizontal a partir da borda direita da área de miniaturas.

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 de chamada para ação:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

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

largura
Largura da barra de rolagem da trilha.
background-color
Cor do plano de fundo da barra de faixa.

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 chamada para ação: css-properties-of-the-thumb-height-in-the-call-to-action-panel

largura
Largura do polegar.
altura
Altura do polegar.
padding-top
Preenchimento vertical entre a parte superior da faixa.
preenchimento inferior
Preenchimento vertical entre a parte inferior da faixa.
border-radius
Raio da borda.
background-color
Cor do polegar.
background-image
Imagem exibida para um determinado estado de miniatura.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS.

NOTE
A miniatura suporta o state seletor de atributos, que pode ser usado para aplicar capas diferentes aos seguintes estados de miniatura: "up", "down", "over", e "disabled".

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 de chamada para ação 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 de chamada para ação: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

largura
Largura do botão.
altura
Altura do botão.
background-image
Imagem exibida para um determinado estado de botão.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS.

NOTE
Esses botões suportam o state seletor de atributos, que pode ser usado para aplicar capas diferentes aos seguintes estados de miniatura: "up", "down", "over", e "disabled".

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8