Compartilhamento social

Última atualização em 2023-05-20
  • Tópicos
  • Dynamic Media Classic
    Exibir mais informações sobre este tópico
  • Viewers
    Exibir mais informações sobre este tópico
  • SDK/API
    Exibir mais informações sobre este tópico
  • Video
    Exibir mais informações sobre este tópico
  • Criado para:
  • Developer
    User

Por padrão, a ferramenta de compartilhamento em redes sociais é exibida no canto superior direito. Consiste em um botão e um painel que se expande quando o usuário clica ou toca em um botão e contém ferramentas de compartilhamento individuais.

A posição e o tamanho da ferramenta de compartilhamento social na interface do usuário do visualizador são controlados com o seguinte:

.s7videoviewer .s7socialshare

Propriedades CSS da ferramenta de compartilhamento em redes sociais

top

Posição vertical da ferramenta de compartilhamento em redes sociais em relação ao contêiner do visualizador.

left

Posição horizontal da ferramenta de compartilhamento em redes sociais em relação ao container do visualizador.

largura

A largura da ferramenta de compartilhamento social.

altura

A altura da ferramenta de compartilhamento social.

Exemplo - configure uma ferramenta de compartilhamento em redes sociais posicionada a quatro pixels da parte superior e a cinco pixels da direita do contêiner do visualizador e dimensionada para 28 x 28 pixels.

.s7videoviewer .s7socialshare {
 top:4px;
 right:5px;
 width:28px;
 height:28px;
}

A aparência do botão de ferramenta de compartilhamento em redes sociais é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7socialshare .s7socialbutton

Propriedades CSS do botão de redes sociais

background-image

A 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 .

OBSERVAÇÃO

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

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - configure um botão de ferramenta de compartilhamento em redes sociais que exiba uma imagem diferente para cada um dos quatro estados de botão diferentes.

.s7videoviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7videoviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7videoviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7videoviewer .s7socialshare .s7socialbutton[state='disabled'] {
background-image:url(images/v2/SocialShare_dark_disabled.png);
}

A aparência do painel que contém os ícones individuais de compartilhamento em redes sociais é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7socialshare .s7socialsharepanel

Propriedades CSS do painel compartilhamento em redes sociais

background-color

A cor do plano de fundo do painel.

Exemplo - configurar um painel para ter cor transparente:

.s7videoviewer .s7socialshare .s7socialsharepanel {
 background-color: transparent;
}

Nesta página