Componente Video
O bloco Video foi pensado para integrar conteudos em movimento na pagina com flexibilidade de fonte e controlo de apresentacao. Permite usar Vimeo ID, Youtube ID, ficheiro de video, imagem de cover, autoplay e HTML embed, alem de ajustar skin, largura, offset, animacao e metadata associada ao proprio bloco.
Informacoes gerais
O bloco Video e uma solucao direta para destacar conteudo audiovisual dentro da composicao da pagina. Pode funcionar como embed editorial, hero em fullscreen, modulo com cover antes da reproducao ou integracao tecnica via HTML personalizado, mantendo coerencia visual com o resto do layout.
Este bloco pode incluir:
- Vimeo ID ou Youtube ID para embeds externos
- upload de Video e respetivos campos ALT e TITULO
- imagem de Video Cover 1920x1080 com metadata propria
- controlo de Autoplay para definir a forma de arranque
- campo HTML Code para integracoes especificas
- ajustes estruturais de Skin, Full Width, Offset, espacamentos e animacao
Utiliza este componente quando o video tem funcao clara na narrativa da pagina e precisa de ganhar espaco proprio. Faz mais sentido para demos, entrevistas, conteudo institucional, aberturas de campanha ou momentos em que o movimento acrescenta contexto que uma imagem estatica nao resolve sozinha.
Exemplos visuais do bloco
3 leituras visuais recorrentes
O bloco Video pode assumir leituras visuais diferentes consoante a fonte escolhida, o uso de cover, a decisao sobre autoplay e a configuracao de skin. Os tres exemplos abaixo resumem cenarios comuns no frontend sem sair da logica base do componente.
Quando usar / Quando evitar
Aplicacao correta do componente
Quando usar
- Para entrevistas, demos, conteudo institucional e momentos em que o movimento acrescenta contexto real
- Para heroes de campanha, aberturas fullscreen e seccoes onde o video precisa de protagonismo proprio
- Quando existe uma capa clara e um racional definido para autoplay, embed ou arranque manual
- Para integrar players externos ou videos proprios sem recorrer a uma estrutura mais complexa de playlist
Quando evitar
- Quando uma imagem estatica resolve a mensagem com mais leveza e menos ruido tecnico
- Quando o video entra apenas como decoracao e nao tem papel narrativo claro
- Quando a pagina ja esta demasiado carregada e um player extra piora performance e foco
Como configurar na pratica
Sequencia de trabalho recomendada
Escolher a fonte
- Decidir se o video vem por Vimeo ID, Youtube ID, upload ou HTML Code
- Evitar ambiguidades e alinhar com a equipa qual e a fonte principal que deve prevalecer
Preparar media e cover
- Carregar o ficheiro de video ou embed e preparar um Video Cover 1920x1080 quando fizer sentido
- Preencher ALT e TITULO de forma coerente com o contexto visual
Definir comportamento
- Escolher Skin, testar Full Width e decidir se o bloco precisa de Offset
- Ativar Autoplay apenas quando melhora a experiencia e nao introduz ruido
Validar no frontend
- Testar mobile, cover, arranque do player e equilibrio entre imagem inicial e copy da pagina
- Se houver varias fontes preenchidas, confirmar em preview qual e a regra efetiva de apresentacao
Boas praticas de conteudo
Clareza de fonte, cover e reproducao
Cover e contexto
- Escolhe um frame de capa que explique rapidamente o tema do video, mesmo antes do play
- Se o cover for a primeira leitura visual do bloco, ele deve aguentar-se sozinho como elemento editorial
- O ALT deve descrever o que o utilizador ve ou o papel do cover no contexto da pagina
Playback e experiencia
- Usa Autoplay com criterio, sobretudo em contexts onde som, movimento ou scroll rapido podem distrair
- Se o video precisa de foco, da-lhe espaco; se e apenas apoio, evita transforma-lo no elemento dominante
- O bloco deve deixar claro se o utilizador vai ver um player, uma capa clicavel ou um embed tecnico de terceiros
Configuracoes avancadas do componente Video
Estrutura, largura e comportamento do bloco
Estas opcoes controlam a forma como o bloco se apresenta dentro da pagina: variante visual, largura, offset, encaixe estrutural e animacao de entrada.
Estrutura visual
- Skin define a variante geral do bloco, com opcoes visiveis como Background e Fullscreen
- Disabled block permite desativar o componente sem o apagar
- Full Width faz o bloco ganhar mais presenca horizontal no layout
Posicionamento
- Offset ajuda a deslocar visualmente o bloco para composicoes menos rigidas
- Block ID e Extra Class sao uteis para ancora, navegacao interna e customizacao adicional
- Margin e Padding afinam o encaixe do video no ritmo geral da pagina
Animacao
- Animation on/off ativa ou desativa a entrada animada do bloco
- Scroll animation type define a linguagem de movimento aplicada no frontend
- Usa animacao apenas quando ela reforca a experiencia e nao rouba foco ao conteudo do proprio video
Configuracao do conteudo principal
Fontes, ficheiro de video, cover e metadata
Na configuracao principal do bloco defines a origem do video, a capa de apoio, o comportamento de autoplay e o eventual embed tecnico atraves de HTML Code.
Fontes de video
- Vimeo ID e Youtube ID permitem embebidos externos com logica mais direta
- O campo Video recebe um ficheiro proprio quando o projeto precisa de maior controlo sobre o asset
- Convem preencher a fonte realmente usada em producao para evitar leituras ambiguas
Cover e metadata
- Video Cover 1920x1080 cria uma imagem de entrada consistente antes da reproducao
- Tanto no video como no cover existem campos ALT e TITULO
- Isto ajuda a manter contexto, acessibilidade e coerencia editorial na primeira leitura visual
Embed tecnico
- HTML Code serve para players custom, iframes especificos ou integracoes que fogem ao fluxo padrao
- Pode ser util quando existe consentimento, tracking ou wrappers especiais associados ao player
- Quando esta via e usada, convem rever o resultado final em preview com especial atencao
Configuracoes de reproducao e comportamento
Autoplay, cover e logica de apresentacao
Depois de definida a fonte, e nesta combinacao de campos que decides como o video se apresenta ao utilizador: se arranca automaticamente, se entra por cover e como convive com eventuais embeds externos ou HTML personalizado.
Autoplay
- O campo Autoplay controla se o video tenta arrancar sem interacao inicial
- Esta opcao deve ser validada com cuidado, sobretudo em layouts editoriais, mobile e cenarios com varias camadas de scroll
- Quando a leitura da capa e importante, o arranque manual costuma proteger melhor a experiencia
Cover-first
- O Video Cover 1920x1080 ajuda a apresentar o bloco como unidade visual mesmo antes do play
- Funciona bem para campanhas, entrevistas e modulos onde o click deve ser uma decisao consciente
- Se o video e heroico e ocupa grande area, a capa precisa de aguentar a primeira impressao sozinha
Prioridade de fonte
- Se varios campos de fonte estiverem preenchidos, e importante confirmar no projeto qual e a regra de prioridade
- Em muitos casos, a equipa editorial ganha clareza quando escolhe uma unica via por bloco
- Isto reduz manutencao futura e evita diferencas entre preview e implementacao real
HTML Code
- Quando o video depende de embed custom, o HTML Code pode substituir ou complementar a abordagem por ID
- E especialmente util para wrappers de consentimento, players proprietarios ou integracoes com regras especificas
- Nestes cenarios, testa sempre a responsividade e o comportamento em dispositivos reais
Guias relacionados
Contexto complementar para este bloco