Chame para ação

O painel Chamar para ação é exibido quando o vídeo termina e exibe todas as amostras interativas associadas ao vídeo em particular.

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

A chamada para o painel de ação sempre ocupa toda a área disponível do visualizador.

O seguinte seletor de classe CSS controla a aparência da cor do fundo no painel de ação da chamada para :

.s7interactivevideoviewer .s7calltoaction

Propriedades CSS da cor de fundo da chamada para o painel de ação

cor do fundo

Cor do plano de fundo da chamada para o painel de ação.

Exemplo

Para configurar uma chamada para o painel de ação com fundo cinza escuro:

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

O seguinte seletor de classe CSS controla a aparência do cabeçalho no painel de ação da chamada para :

.s7interactivevideoviewer .s7calltoaction .s7header

Propriedades CSS da chamada para o cabeçalho do painel de ação

cor do fundo

Cor do plano de fundo do cabeçalho.

altura

Altura do cabeçalho.

border-bottom

Borda inferior do cabeçalho.

Exemplo

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

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

O seguinte seletor de classe CSS controla a aparência do título do cabeçalho no painel de ação da chamada para :

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

Propriedades CSS do título do cabeçalho no painel de ação chamada para :

color

Cor do texto dentro do banner.

tamanho da fonte

Tamanho da fonte.

altura da linha

Altura da linha.

família de fontes

Família de fontes.

alinhamento de texto

Alinhamento do texto no banner.

preenchimento à esquerda

Preenchimento esquerdo.

preenchimento à direita

Preenchimento direito para permitir espaço para o botão Reproduzir .

Exemplo

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

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

O seguinte seletor de classe CSS controla a aparência do botão fechar no painel de ação da chamada para :

.s7interactivevideoviewer .s7calltoaction .s7closebutton

Propriedades de CSS do botão Fechar no painel de ação da chamada para :

top

Posição da parte superior do cabeçalho, incluindo o preenchimento.

right

Posição à direita do cabeçalho, incluindo o preenchimento.

width

Largura do botão.

altura

Altura do botão.

imagem de fundo

Imagem exibida para um determinado estado de botão.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

Exemplo

Para configurar um botão de repetição com 28 x 28 pixels; posicionados 20 pixels a partir da parte superior e da extremidade direita do cabeçalho; exibe uma imagem diferente para cada um dos quatro estados de botão diferentes; obtém a arte-final da imagem 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 seguinte seletor de classe CSS controla a aparência da exibição de grade de miniatura no painel de ação chamada para :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

Propriedades CSS da exibição de grade de miniatura no painel de ação chamada para :

cor do fundo

Cor do plano de fundo da área de miniaturas.

Exemplo

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

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

O seguinte seletor de classe CSS controla a aparência da célula de polegar no painel de ação da chamada para :

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Propriedades de CSS da célula de miniatura no painel de ação da chamada para :

margem

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

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

Exemplo

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 seguinte seletor de classe CSS controla a aparência da miniatura no painel de ação da chamada para :

.s7interactivevideoviewer .s7calltoaction .s7thumb

Propriedades de CSS da miniatura no painel de ação da chamada para :

largura

Largura da miniatura.

altura

Altura da miniatura.

border

Borda da miniatura.

OBSERVAÇÃO

A miniatura é compatível com o seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em particular, state="selected" corresponde à miniatura da imagem atualmente selecionada; state="default" corresponde ao resto das miniaturas; state="over" é usado com o mouse.

Exemplo

Para configurar miniaturas com 94 x 100 pixels:

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

O seguinte seletor de classe CSS controla a aparência do rótulo de miniatura no painel de ação chamada para :

.s7interactivevideoviewer .s7calltoaction .s7label

Propriedades CSS do rótulo da miniatura no painel de ação da chamada para :

color

Cor do texto do rótulo.

alinhamento de texto

Alinhamento horizontal do rótulo.

família de fontes

Nome da fonte.

tamanho da fonte

Família de fontes.

Exemplo

Para configurar rótulos que usam uma cor branca, seja alinhado no centro a 15 pixels e use uma fonte Arial:

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

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

O seguinte seletor de classe CSS controla a aparência da área da barra de rolagem no painel de ação chamada para :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

Propriedades de CSS da área da barra de rolagem no painel de ação chamada:

largura

Largura da barra de rolagem.

top

Deslocamento da barra de rolagem vertical na parte superior da área de miniaturas.

bottom

Deslocamento da barra de rolagem vertical na parte inferior da área de miniaturas.

right

Deslocamento da barra de rolagem horizontal na borda direita da área de miniaturas.

Exemplo

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

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

O rastreamento 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 seguinte seletor de classe CSS controla a aparência do rastreamento da barra de rolagem no painel de ação chamada para :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propriedades CSS da barra de rolagem da faixa

largura

Largura da barra de rolagem da faixa.

cor do fundo

Cor do plano de fundo da barra de faixa.

Exemplo

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

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

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

O seguinte seletor de classe CSS controla a aparência da altura do polegar e de outros aspectos:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propriedades CSS da altura do polegar no painel de ação:

largura

Largura do polegar.

altura

Altura do polegar.

parte superior do preenchimento

Preenchimento vertical entre a parte superior da via.

parte inferior do preenchimento

Preenchimento vertical entre a parte inferior da via.

border-radius

Raio da borda.

cor do fundo

Cor do polegar.

imagem de fundo

Imagem exibida para um determinado estado de polegar.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

OBSERVAÇÃO

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

Exemplo

Para configurar um polegar da barra de rolagem com 6 x 167 pixels, ele possui três cantos arredondados de pixels 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 seguinte seletor de classe CSS 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 superior, esquerda, inferior ou direita; a lógica do visualizador os posiciona automaticamente. A chamada para o painel de ação no visualizador de vídeo interativo não usa esses botões na barra de rolagem, então seu tamanho é definido como 0 pixels no CSS padrão.

Propriedades CSS dos botões de rolagem superior e inferior no painel de ação da chamada para:

largura

Largura do botão.

altura

Altura do botão.

imagem de fundo

Imagem exibida para um determinado estado de botão.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

OBSERVAÇÃO

Esses botões suportam o seletor de atributos state, que pode ser usado para aplicar capas diferentes aos seguintes estados de miniatura diferentes: "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

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

Nesta página