Componentes interativos: Vídeo

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.

1-Jan-27-2021-04-56-26-60-PM

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. 

inline-1

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. 

container-1

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. 

pagebg-1

 

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.

image - 2021-07-28T174551.327

image - 2021-07-28T174555.108

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. 😀