Componentes interativos: Vídeo

Você está querendo adicionar um vídeo do YouTube, Vimeo, Brightcove ou Ooyala? Sem problemas! Você pode usar o componente de vídeo integrado da plataforma Ion para usar um vídeo hospedado nessas plataformas.

 

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

  • Video ID
  • Display Controls
  • Display Information
  • Show Related Videos
  • Autoplay Video
  • Loop Video
  • Remove YouTube Branding

Vimeo

  • Video ID
  • Display Title
  • Display Byline
  • Display Portrait
  • Control color (usado para especificar a cor do controle de vídeo - defina usando um número hex).
  • Autoplay Video
  • Loop Video

Ooyala

  • Branding ID
  • Embed code
  • Display Controls
  • Autoplay Video
  • Loop Video

Brightcove

  • Video ID
  • Account Number
  • Display Controls
  • Autoplay Video
  • Loop Video

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