Você pode usar o componente de vídeo integrado da plataforma Ion para disponibilizar um vídeo que estará hospedado nessas plataformas.
É possível adicionar um vídeo do YouTube, Vimeo, Brightcove ou Ooyala, e também via code-block. Sem problemas!
Vamos começar
Para começar, arraste o ícone de vídeo da categoria Interactive para a página onde deseja exibir seu vídeo. Vá em General Settings, dentro da aba Content, para selecionar o tipo de vídeo (Vimeo, YouTube, Brightcove, Ooyala) e, em seguida, defina sua altura e largura.
Video Settings (Configurações de vídeo)
Após definir as configurações gerais, você pode definir configurações específicas para o seu tipo de vídeo indo em Video Settings. Abaixo, você encontra uma lista das configurações disponíveis para Vimeo, YouTube, Brightcove e Ooyala. Essas configurações estão disponíveis em Content no Creative Studio. Na maioria dos casos, apenas o ID do vídeo é suficiente, no entanto, a plataforma Ooyala exige que o código de incorporação completo seja usado.
YouTube | Vimeo | Ooyala | Brightcove |
Video ID | Video ID | Branding ID | Video ID |
Display Controls | Display Title | Embed code | Account Number |
Display Information | Display Byline | Display Controls | Display Controls |
Show Related Videos | Display Portrait | Autoplay Video | Autoplay Video |
Autoplay Video | Control color (used to specify the color of the video controls - defined using a hex number). |
Loop Video | Loop Video |
Loop Video | Autoplay Video | ||
Remove YouTube Branding | Loop Video |
Background Video Support
Background Video Support (Suporte para vídeo de fundo)
Como você pode ver, as abas para edição de vídeo do Creative Studio fornecem ainda mais opções para adicionar em suas páginas.
Você não apenas pode adicionar um vídeo em qualquer lugar, como pode também adicionar um vídeo como fundo em uma caixa ou como fundo de uma página inteira. Em Video Placement, você tem três opções para isso:
- Inline
- Container Background
- Page Background
Tem curiosidade para saber a diferença entre eles? Veja a seguir!
Inline
Ao adicionar qualquer vídeo, automaticamente ele vai estar configurado como Inline. A partir daí, você pode adicioná-lo a qualquer caixa na página e alterar suas configurações de tamanho, como já vimos anteriormente.
Container Background
Ao adicionar um vídeo e escolher para ele a opção “Container Background”, o vídeo vai ocupar todo o fundo da caixa que você escolher para ele, inclusive com as opções Autoplay (executar automaticamente) e Looping (repetição).
Esta opção permite que o vídeo apareça para acessos por desktop. Esta opção não irá aparecer para dispositivos móveis. Nesses casos, você pode optar por adicionar uma imagem estática como fundo. Em função da incapacidade dos dispositivos móveis de executar vídeo automaticamente, usar uma imagem estática vai resultar em uma experiência mais fluida para os seus visitantes que acessam por esses meios.
Page Background
Ao selecionar a opção “Page background”, o vídeo vai ocupar todo o fundo da página, inclusive com as opções Autoplay (executar automaticamente) e Looping (repetição).
Esta opção permite que o vídeo apareça para acessos por desktop. Esta opção não irá aparecer para dispositivos móveis. Nesses casos, você pode optar por adicionar uma imagem estática como fundo. Em função da incapacidade dos dispositivos móveis de executar vídeo automaticamente, usar uma imagem estática vai resultar em uma experiência mais fluida para os seus visitantes que acessam por esses meios.
Nota sobre reprodução automática (Autoplay)
Depois de atualizações recentes no Chrome e IOS/Safari, podem acontecer algumas restrições dos navegadores para a reprodução automática de vídeos, principalmente vídeos com som.
Se o vídeo não estiver sendo reproduzido por possuir áudio, você pode optar por utilizar uma versão sem som.
*NOTA: Também podem existir restrições de privacidade no próprio vídeo, o que nesse caso requer que o proprietário altere suas configurações diretamente no YouTube, Vimeo, entre outros.
Caso você tenha dúvidas, por favor, entre em contato conosco help@rockcontent.com. 😀