O bloco Video Pop Up permite incorporar conteúdo de vídeo do YouTube, Vimeo ou uma fonte auto-hospedada em qualquer página do SeedProd. Ao contrário de um reprodutor incorporado padrão, o bloco suporta um modo lightbox, um vídeo fixo que acompanha os visitantes enquanto eles rolam a página e uma sobreposição de imagem que funciona como uma miniatura personalizada — dando a você controle total sobre como os visitantes descobrem e interagem com o seu vídeo.
Quer você esteja apresentando uma demonstração de produto, um depoimento ou um vídeo explicativo, o bloco Pop-up de vídeo oferece opções avançadas de reprodução — incluindo reprodução automática, mudo, loop, modo de privacidade e um recurso de vídeo teaser — para que você possa personalizar a experiência de visualização de acordo com os objetivos da sua página e as preferências do público.
Adicionando o bloco pop-up de vídeo às suas páginas
Siga estas etapas para adicionar um bloco Pop-up de vídeo à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Pop-up de vídeo na seção desejada da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Pop-up de vídeo para abrir suas configurações. Na guia Conteúdo, as configurações estão organizadas em quatro seções.
Vídeo:
- Fonte: Escolha sua fonte de vídeo — YouTube, Vimeo ou Personalizado (para arquivos de vídeo hospedados internamente ou externamente).
- URL do YouTube (apenas YouTube): insira a URL completa do vídeo do YouTube.
- URL do Vimeo (apenas Vimeo): insira a URL completa do vídeo do Vimeo. Observação: o Sticky Video requer uma conta Starter, Standard, Advanced, Plus, Pro, Business, Premium ou Enterprise do Vimeo.
- URL externa/URL de vídeo personalizado (somente personalizado): alterne a URL externa para vincular a um arquivo de vídeo hospedado ou insira a URL direta do seu vídeo. Você também pode usar Selecionar vídeo personalizado para escolher um arquivo da sua biblioteca de mídia.
- Hora de início: especifique um tempo (em segundos) em que o vídeo deve começar a ser reproduzido.
- Hora final: especifique um tempo (em segundos) em que o vídeo deve parar de ser reproduzido.
Opções de vídeo:
- Reprodução automática: Inicie automaticamente o vídeo quando a página for carregada.
- Reproduzir no celular: reproduza o vídeo em linha em dispositivos móveis, em vez de entrar automaticamente no modo de tela cheia.
- Silenciar: Inicie o vídeo em modo silencioso para evitar atrapalhar a experiência do visitante.
- Loop: Repita o vídeo continuamente quando ele chegar ao fim.
- Mostrar controles do reprodutor: Mostra ou oculta os controles de reprodução do reprodutor de vídeo.
- Modo de Privacidade: Quando ativado, o YouTube e o Vimeo não armazenarão informações dos visitantes, a menos que eles reproduzam ativamente o vídeo.
- Carregamento lento: adie o carregamento do vídeo até que ele fique visível na janela de visualização para melhorar a velocidade de carregamento da página.
- Título da introdução / Retrato da introdução / Assinatura da introdução (apenas Vimeo): alterne a exibição do título do vídeo, do retrato do autor e da assinatura do autor mostrados na introdução do Vimeo.
- Controles de cor (apenas Vimeo): defina a cor dos controles do player do Vimeo.
- Vídeos sugeridos (apenas YouTube): escolha o que aparece após o término do vídeo — Canal do vídeo atual (vídeos relacionados do mesmo canal) ou Qualquer vídeo.
- Mostrar botão de download (apenas personalizado): Mostra um botão de download no reprodutor de vídeo personalizado.
- Pré-carregamento (somente personalizado): defina como o vídeo é carregado ao carregar a página — Metadados (carrega apenas as informações do vídeo), Automático (carrega o vídeo completo) ou Nenhum.
- Pôster: defina uma imagem de pôster que será exibida antes do início da reprodução do vídeo.
- Ativar vídeo fixo: quando ativado, o reprodutor de vídeo fica fixo em um canto da tela enquanto os visitantes rolam a página, mantendo o vídeo visível em toda a página.
Vídeo teaser:
- Ativar vídeo teaser: Substitua a miniatura estática por um pequeno vídeo teaser em loop que é reproduzido silenciosamente na página. Quando um visitante clica nele, o vídeo completo é aberto. Observação: ativar essa opção desativa o recurso de sobreposição de imagem.
- Ícone de reprodução do vídeo teaser: escolha o ícone exibido sobre o vídeo teaser para indicar que ele é clicável.
- Tamanho da fonte do ícone: defina o tamanho do ícone de reprodução do teaser.
- Mostrar banner: exiba um banner sobre o vídeo teaser (por exemplo, uma mensagem “Clique para ouvir o áudio”). Configure o texto do banner, a cor de fundo, a cor do texto, a tipografia e o ícone.
Sobreposição de imagem:
- Ativar sobreposição de imagem: substitua a miniatura padrão do vídeo por uma imagem personalizada. Os visitantes clicam na imagem para abrir o vídeo. Observação: ativar essa opção desativa o recurso Vídeo teaser.
- Escolha a imagem: selecione ou carregue a imagem de sobreposição da sua biblioteca de mídia.
- Tamanho da imagem: defina a largura e a altura da imagem sobreposta em pixels ou como uma porcentagem.
- Mostrar ícone de reprodução: alterne o ícone de reprodução que aparece sobre a imagem sobreposta.
- Tamanho da fonte do ícone: defina o tamanho do ícone de reprodução exibido na imagem sobreposta.
- Opacidade do ícone: defina a transparência do ícone de reprodução (escala de 0 a 10).
- Cor do ícone: defina a cor do ícone de reprodução na imagem sobreposta.
- Ativar Lightbox: Quando ativado, clicar na imagem sobreposta abre o vídeo em uma sobreposição lightbox em vez de reproduzi-lo inline.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco Pop-up de vídeo.
Estilos:
- Largura: defina a largura do reprodutor de vídeo como uma porcentagem de seu contêiner usando um controle deslizante.
- Proporção da imagem: escolha a proporção da imagem do reprodutor de vídeo — 1:1, 3:2, 4:3, 9:16, 16:9 ou 21:9.
- Alinhamento: defina o alinhamento horizontal do reprodutor de vídeo — Esquerda, Centro ou Direita — com controles por dispositivo para desktop, tablet e celular.
- Sombra: aplique uma sombra ao reprodutor de vídeo usando tamanhos predefinidos — Nenhum, Fino, Pequeno, Médio, Grande, Extragrande ou 2X Grande.
Espaçamento:
- Margem: defina o espaçamento externo ao redor do bloco nos quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: defina o espaçamento interno dentro do bloco wrapper nos quatro lados, com controles por dispositivo.
Atributos:
- Classe personalizada: adicione uma ou mais classes CSS personalizadas ao invólucro do bloco para obter um estilo específico.
- ID CSS: O SeedProd gera automaticamente um ID CSS exclusivo para este bloco. Você pode usá-lo para referenciar o bloco em CSS ou JavaScript personalizados.
- Atributos personalizados: adicione atributos HTML personalizados ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato chave|valor.
Visibilidade do dispositivo:
- Ocultar na área de trabalho: alterne para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no tablet: alterne para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no celular: Alterne para ocultar o bloco quando visualizado em telas de celular.
Efeitos de animação:
- Efeito de rolagem: aplique uma animação acionada pela rolagem ao bloco, incluindo opções de rolagem vertical e horizontal com controles de direção, velocidade e deslocamento da janela de visualização.
- Efeito do mouse: aplique um efeito de paralaxe acionado pelo movimento do mouse ao bloco.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Pop-up de vídeo e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Pop-up de vídeo à sua página! Com suporte para YouTube, Vimeo e vídeos auto-hospedados, além de sobreposições de imagens, pré-visualizações de teasers, reprodução fixa e modos lightbox, este bloco oferece tudo o que você precisa para criar uma experiência de vídeo envolvente. Experimente as opções de reprodução e as configurações de sobreposição para encontrar a combinação que melhor capta a atenção dos seus visitantes.