O bloco de Vídeo Pop-Up permite incorporar conteúdo de vídeo do YouTube, Vimeo ou de uma fonte auto-hospedada em qualquer página do SeedProd. Diferente de um player incorporado padrão, o bloco suporta o modo lightbox, um vídeo fixo que segue os visitantes enquanto eles rolam a página, e uma sobreposição de imagem que atua como uma miniatura personalizada — dando a você controle total sobre como os visitantes descobrem e interagem com seu vídeo.
Se você está exibindo uma demonstração de produto, um depoimento ou um vídeo explicativo, o bloco de Vídeo Pop-Up 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 adaptar a experiência de visualização para corresponder aos objetivos da sua página e às preferências do público.
Adicionando o Bloco de Vídeo Pop-Up às Suas Páginas
Siga estas etapas para adicionar um bloco de Vídeo Pop-Up à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Vídeo Pop-Up na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco Vídeo Pop-Up para abrir suas configurações. Na aba Conteúdo, as configurações são organizadas em quatro seções.
Vídeo:
- Fonte: Escolha sua fonte de vídeo — YouTube, Vimeo ou Personalizado (para arquivos de vídeo auto-hospedados ou hospedados externamente).
- URL do YouTube (Somente YouTube): Insira a URL completa do vídeo do YouTube.
- URL do Vimeo (Somente Vimeo): Insira a URL completa do vídeo do Vimeo. Observação: Vídeo Fixo requer uma conta Vimeo Starter, Standard, Advanced, Plus, Pro, Business, Premium ou Enterprise.
- URL Externa / URL de Vídeo Personalizado (Somente Personalizado): Ative 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 horário (em segundos) onde o vídeo deve começar a reproduzir.
- Hora de Fim: Especifique um horário (em segundos) onde o vídeo deve parar de reproduzir.
Opções de Vídeo:
- Reprodução Automática: Inicie o vídeo automaticamente quando a página carregar.
- Reproduzir no Celular: Reproduza o vídeo inline em dispositivos móveis em vez de entrar automaticamente no modo de tela cheia.
- Mudo: Inicie o vídeo sem som para evitar perturbar a experiência do visitante.
- Loop: Repita o vídeo continuamente quando ele chegar ao fim.
- Mostrar Controles do Player: Mostre ou oculte os controles de reprodução do player de vídeo.
- Modo de Privacidade: Quando ativado, o YouTube e o Vimeo não armazenarão informações do visitante, a menos que ele reproduza o vídeo ativamente.
- Carregamento Lento: Adie o carregamento do vídeo até que ele fique visível na área de visualização para melhorar a velocidade de carregamento da página.
- Título de Introdução / Retrato de Introdução / Nome do Autor de Introdução (Somente Vimeo): Ative a exibição do título do vídeo, retrato do autor e nome do autor mostrados na introdução do Vimeo.
- Cor dos Controles (Somente Vimeo): Defina a cor dos controles do player do Vimeo.
- Vídeos Sugeridos (Somente YouTube): Escolha o que aparece após o vídeo terminar — Canal do Vídeo Atual (vídeos relacionados do mesmo canal) ou Qualquer Vídeo.
- Mostrar Botão de Download (Somente Personalizado): Mostre um botão de download no player de vídeo personalizado.
- Pré-carregar (Somente Personalizado): Defina como o vídeo carrega ao carregar a página — Metadados (carrega apenas informações do vídeo), Automático (carrega o vídeo completo) ou Nenhum.
- Pôster: Defina uma imagem de pôster que é exibida antes do vídeo começar a tocar.
- Ativar Vídeo Fixo: Quando ativado, o player de vídeo se fixa em um canto da tela conforme os visitantes rolam a página, mantendo o vídeo visível durante toda a navegação.
Vídeo Teaser:
- Ativar Vídeo Teaser: Substitua a miniatura estática por um vídeo teaser curto em loop que toca silenciosamente na página. Quando um visitante clica nele, o vídeo completo é aberto. Observação: Ativar esta 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, um aviso “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 de vídeo padrão por uma imagem personalizada. Os visitantes clicam na imagem para abrir o vídeo. Observação: Ativar esta opção desativa o recurso de Vídeo Teaser.
- Escolher Imagem: Selecione ou carregue a imagem de sobreposição de sua biblioteca de mídia.
- Tamanho da Imagem: Defina a largura e a altura da imagem de sobreposição em pixels ou como uma porcentagem.
- Mostrar Ícone de Reprodução: Ative o ícone de reprodução que aparece sobre a imagem de sobreposição.
- Tamanho da Fonte do Ícone: Defina o tamanho do ícone de reprodução exibido na imagem de sobreposição.
- 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 de sobreposição.
- Ativar Lightbox: Quando ativado, clicar na imagem de sobreposição abre o vídeo em uma sobreposição de lightbox em vez de reproduzi-lo inline.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Pop-up de Vídeo.
Estilos:
- Largura: Defina a largura do player de vídeo como uma porcentagem de seu contêiner usando um controle deslizante.
- Proporção: Escolha a proporção do player de vídeo — 1:1, 3:2, 4:3, 9:16, 16:9 ou 21:9.
- Alinhamento: Defina o alinhamento horizontal do player de vídeo — Esquerda, Centro ou Direita — com controles por dispositivo para desktop, tablet e celular.
- Sombra: Aplique uma sombra de caixa ao player de vídeo usando tamanhos predefinidos — Nenhuma, Fina, Pequena, Média, Grande, X Grande ou 2X Grande.
Espaçamento:
- Margem: Defina o espaçamento externo ao redor do bloco em todos os quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: Defina o espaçamento interno dentro do wrapper do bloco em todos os quatro lados, com controles por dispositivo.
Atributos:
- Classe Personalizada: Adicione uma ou mais classes CSS personalizadas ao wrapper do bloco para estilização direcionada.
- 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 personalizado.
- 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 no Desktop: Ative para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no Tablet: Ative para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no Celular: Ative para ocultar o bloco ao ser visualizado em telas de celular.
Efeitos de Animação:
- Efeito de Rolagem: Aplique uma animação acionada por rolagem ao bloco, incluindo opções de Rolagem Vertical e Rolagem Horizontal com controles de direção, velocidade e deslocamento de visualização.
- Efeito do Mouse: Aplique um efeito de paralaxe ao bloco, acionado pelo movimento do mouse.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Pop-up de Vídeo e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Pop-up de Vídeo à sua página! Com suporte para YouTube, Vimeo e vídeo auto-hospedado, juntamente com sobreposições de imagem, pré-visualizações de teaser, reprodução fixa e modos de 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 captura a atenção dos seus visitantes.