Todas as coleções
Construtor/Builder
Elementos
Como funciona o elemento Vídeo no RockFunnels
Como funciona o elemento Vídeo no RockFunnels

Saiba como inserir e configurar vídeos nas suas páginas.

Sylas avatar
Escrito por Sylas
Atualizado há mais de uma semana

Para configurar um vídeo acesse a engrenagem do elemento para disponibilizar as possibilidades de configuração que veremos nesse tutorial.


Em caso de dúvidas sobre como adicionar um vídeo em suas páginas, acesse nosso tutorial sobre configurações gerais de elementos no link abaixo:

https://help.rockfunnels.com/pt-BR/articles/6004116-como-funcionam-as-configuracoes-gerais-de-elementos-no-rockfunnels


Ajustes

· Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade de um vídeo. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento de vídeo em cada um desses dispositivos. Para voltar a mostrar o vídeo que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

· Posição

Nas configurações de posição é possível configurar a posição (esquerda, centro, direita) do vídeo clicando nos ícones que representam cada posição, além do tamanho, opacidade e margem (topo) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.


Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

· Embed

No campo embed deve ser inserido a URL de compartilhamento do vídeo que deseja compartilhar em sua página.

O elemento de vídeo do RockFunnels é compatível com vídeos hospedados nas seguintes plataformas de vídeos:

Panda - Vimeo - Vturb - Wistia - Youtube

Atenção: O vídeo irá rodar apenas na página publicada, não tendo ação enquanto estiver no construtor.

Atenção: É possível inserir vídeos também através do elemento ‘embed’ por código, caso utilize uma plataforma de vídeos diferente das citadas acima ou queira adicionar recursos diferentes do padrão na rolagem do vídeo hospedado nas plataformas citadas. Para saber como inserir um elemento de embed, veja nosso tutorial no link abaixo:

https://help.rockfunnels.com/pt-BR/articles/6059521-como-funciona-o-elemento-embed-no-rockfunnels

· Mostrar controles de vídeo

Ao ativar a chave será disponibilizado no vídeo os controles de rolagem, volume, legendas, configurações e modo de tela. Se manter a chave desativada, os controles de vídeo ficarão ocultos.

Estilo

· Borda | Radial

Nas configurações de estilo é possível configurar borda no vídeo. Para isso basta ativar a respectiva chave que então será habilitada a possibilidade de inserir a cor da borda através da paleta de cores ou inserindo o código HEX da cor desejada.

Para ajustar o tamanho da borda, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

Para configurar o radial basta ativar a respectiva chave e configurar os valores de radial manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

Avançado

· Efeitos de movimento – Animação

Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.

Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:

Comportamento:

- Uma vez > o efeito de animação será apresentado apenas uma vez.

- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página (loop).

Ativação:

- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.

Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.

Atraso: É possível configurar um atraso no elemento, ou seja, a imagem irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.

· CSS Classes

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:

https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels

Respondeu à sua pergunta?