Há várias opções para adicionar um vídeo em seu site: Adicionar vídeos do YouTube e do Vimeo, Kinescope, uma opção para adicionar o link direto para um vídeo em um servidor de terceiros (vídeo HTML5) e usar o iFrame para adicionar um vídeo.

Como adicionar vídeos do YouTube

Você pode adicionar os vídeos do YouTube usando os blocos VD01 (um vídeo), VD04 (exibindo um vídeo após clicar no botão Play), VD06N (dois vídeos), VD08 (vídeo e texto), VD09 (vídeo pop-up), VD11 (vídeo com uma capa personalizada), VD12 (vídeo e imagem em uma linha), VD13 (transmissão ao vivo do YouTube com um bate-papo ao vivo), VD14 (lista de reprodução de vídeo), VD16 (widget de vídeo), AB701 (título, descrição e vídeo), BF402N (vídeo ou imagem e formulário em duas colunas), alguns blocos de galeria e também blocos com uma imagem em tela cheia como plano de fundo(saiba mais sobre como adicionar um vídeo como plano de fundo).

Para adicionar um vídeo, você precisa apenas de um link para um vídeo que esteja disponível publicamente e habilitado para incorporação em sites de terceiros nas configurações de privacidade.

Escolha o bloco que mais lhe agrada, acesse a guia Content (Conteúdo) e insira um link para o vídeo.

Se você quiser que o vídeo seja reproduzido a partir de um determinado momento, adicione o fragmento ?start= ao URL e especifique o tempo necessário em segundos a partir do início do vídeo. Por exemplo, XEfDYMngJeE?start=5025. Nesse caso, o vídeo será reproduzido a partir do 5025º segundo. Você pode copiar rapidamente o tempo clicando com o botão direito do mouse no player e selecionando a opção "Copy video URL at current time".

Como adicionar vídeos do Vimeo

Você pode adicionar os vídeos do Vimeo usando os blocos VD01 (um vídeo), VD04 (exibição de um vídeo após clicar no botão Play), VD06N (dois vídeos), VD08 (vídeo e texto), VD09 (vídeo pop-up), VD11 (vídeo com uma capa personalizada), VD12 (vídeo e imagem em uma linha), VD14 (lista de reprodução de vídeo), VD16 (widget de vídeo), AB701 (título, descrição e vídeo), BF402N (vídeo ou imagem e formulário em duas colunas) e alguns blocos de galeria, além de blocos com uma imagem de tela cheia como plano de fundo.

Se o seu vídeo estiver bloqueado pelas configurações de privacidade do Vimeo, ele terá uma combinação adicional de números e letras no final do link após o ID do vídeo. Para que o vídeo seja reproduzido, adicione essa combinação ao campo Hash do link privado do Vimeo.

Como adicionar vídeos de um servidor de terceiros (vídeo HTML5)

Se o seu vídeo não estiver publicado nos serviços de hospedagem de vídeo mencionados, você poderá carregá-lo em seu próprio servidor e inseri-lo usando os seguintes blocos de vídeo HTML5: VD01 (um vídeo), VD04 (exibição de um vídeo após clicar no botão Play), VD08 (vídeo e texto), VD09 (vídeo pop-up), VD11 (vídeo com uma capa personalizada), VD12 (vídeo e imagem em uma linha), VD16 (widget de vídeo), AB701 (título, descrição e vídeo), BF402N (vídeo ou imagem e formulário em duas colunas) e alguns blocos de galeria. Também é possível adicionar um vídeo HTML5 como plano de fundo no seu site, usando blocos com plano de fundo em tela cheia(saiba mais sobre como adicionar um vídeo como plano de fundo).

Para adicionar esse vídeo à página, você precisa usar arquivos de vídeo WebM e MP4. Você pode converter vídeos para esses formatos usando conversores on-line ou software de edição ou conversão de vídeo. Em seguida, coloque-o na hospedagem e obtenha um link direto para o arquivo. Observe que você provavelmente precisará usar um serviço de hospedagem de arquivos pago, pois nem todos os serviços de armazenamento de arquivos têm esse recurso.

Não é possível carregar o arquivo de vídeo em Tilda , mas você pode usar serviços de terceiros que fornecem um link direto para um arquivo.

Vá para a guia Content (Conteúdo) do bloco de vídeo HTML5 e adicione o link para seus vídeos em ambos os formatos nos campos obrigatórios.

Em alguns blocos, há apenas um campo para adicionar um link a um vídeo HTML5. Nesse caso, você pode usar apenas um formato de arquivo, sendo preferível o MP4.

Tabela de suporte do navegador para vídeos MP4 → https://caniuse.com/mpeg4
Tabela de suporte do navegador para vídeos WebM → https://caniuse.com/webm

Como carregar seu vídeo em um servidor de terceiros

Para adicionar um link direto para um arquivo em um bloco de vídeo HTML5, é necessário carregá-lo em um serviço de armazenamento de arquivos. As opções de armazenamento em nuvem, como o Google Drive ou o Dropbox, não são adequadas para isso, pois não fornecem um link direto para um arquivo.

Para essa tarefa, você precisa usar serviços ou provedores de hospedagem que ofereçam serviço de armazenamento de arquivos. Vamos examinar o processo de como fazer upload de um arquivo e obter um link direto para ele usando o Selectel como exemplo.

Como adicionar vídeos do Kinescope

Você pode adicionar os vídeos do Kinescope usando os blocos VD01 (um vídeo), VD04 (exibindo um vídeo depois de clicar no botão Play), VD08 (vídeo e texto), VD09 (vídeo pop-up), VD11 (vídeo com uma capa personalizada), VD12 (vídeo e imagem em uma linha), VD14 (lista de reprodução de vídeo), AB701 (título, descrição e vídeo), BF402N (vídeo ou imagem e formulário em duas colunas) e também alguns blocos com uma imagem em tela cheia como plano de fundo.

Para começar a trabalhar com o Kinescope, você precisa se inscrever no site https://www.kinescope.com/ ou entrar em sua conta.

Clique em "Start for free" (Iniciar gratuitamente)

Para carregar seu vídeo no Kinescope, clique no botão Novo no canto superior direito, selecione "Carregar um arquivo" e adicione um vídeo.

Para adicionar o vídeo ao site, clique no botão com três pontos próximo ao vídeo no Catálogo → Copie o link → Cole o link na guia Conteúdo do bloco em Tilda.

Como adicionar vídeo usando o iFrame

É possível adicionar vídeos com iFrame usando os blocos VD01 (um vídeo), VD04 (exibição de um vídeo após clicar no botão Reproduzir), VD08 (vídeo e texto), VD09 (vídeo pop-up), VD11 (vídeo com capa personalizada), VD12 (vídeo e imagem em uma linha), VD14 (lista de reprodução de vídeo), AB701 (título, descrição e vídeo), BF402N (vídeo ou imagem e formulário em duas colunas).

Essa opção permite adicionar vídeos de qualquer plataforma que forneça código iframe para incorporação de vídeo em um site.

Com essa opção, as configurações "Autoplay video" e "Video with sound muted" não funcionarão. Se a plataforma que hospeda o vídeo permitir isso, você poderá inserir os parâmetros Autoplay e Mute no link.

Vídeos de fundo para capas e outros blocos

Você pode usar um vídeo para uma capa ou outros blocos com uma imagem como plano de fundo em vez de uma imagem de plano de fundo estática. Vá para a guia Content (Conteúdo) e cole um link para seu vídeo no campo obrigatório. Você pode usar um link de vídeo do YouTube ou um link de vídeo HTML5 que tenha obtido usando o guia acima.

Um exemplo de vídeo de fundo

Um bloco com uma lista de reprodução de vídeo

O bloco da lista de reprodução está na categoria "Vídeo" → bloco VD14.

Esse bloco é compatível com vídeos dos serviços YouTube, Vimeo e Kinescope. Para adicionar um vídeo, é necessário especificar seus dados no seguinte formato:
Link para o vídeo; Título do vídeo; Duração do vídeo; Descrição do vídeo

Um breve resumo de cada vídeo na lista de reprodução deve ser especificado em uma nova linha.

Widget de vídeo

O widget de vídeo é um pequeno vídeo no canto da tela que pode ajudá-lo a compartilhar a história do seu produto ou serviço. A visualização é reproduzida sem som e, se você clicar nela, o vídeo principal com som será carregado.

Para adicionar o widget de vídeo, vá até a categoria Vídeo e selecione o bloco VD16.

Antes de adicioná-lo, você deve preparar e otimizar seu vídeo para a Web (usando um software especial ou editores on-line, como o Veed.io).

Depois disso, carregue o arquivo em um serviço que ofereça armazenamento de vídeo e acesso a ele usando um link direto.

Você não pode carregar o arquivo de vídeo em Tilda, mas pode usar serviços de terceiros.

A melhor opção é carregar o arquivo em sua hospedagem, como o Selectel. Guia detalhado →

Vá para a guia Content (Conteúdo) do bloco e cole o link para o vídeo principal.

Você pode adicionar a versão prévia do vídeo opcionalmente. Ela pode ajudar os usuários a ter uma ideia introdutória do vídeo principal e reduzir o tempo de carregamento do site.
O tamanho ideal do vídeo é 200px de largura e até 5 segundos.

Você também pode especificar um link e um texto para o botão no vídeo principal se o seu objetivo for incentivar o visitante a realizar algum tipo de ação. Se você não precisar de um botão, basta manter os campos vazios.

Nas configurações do bloco, você pode ajustar os parâmetros do widget, o vídeo principal que é aberto e os botões. Para o widget, é possível especificar a proporção, a largura e os parâmetros da borda, a posição na tela e outros parâmetros. Para o vídeo principal, você pode configurar a borda, a sombra e os parâmetros do botão Play. A largura do vídeo é sempre fixa - 560x315 para vídeos horizontais e vice-versa - 315x560 para vídeos verticais.

Adicionar um vídeo em Zero Block

Para adicionar um vídeo em Zero Block → clique no botão (+) e adicione um elemento de vídeo → selecione uma das opções disponíveis para adicionar um vídeo: YouTube, Vimeo, MP4, Kinescope → cole o link para o vídeo ou seu ID.

Para adicionar vídeos de outros serviços, você pode usar a opção de incorporação de código HTML: Adicione o elemento HTML → clique no botão Editar código no painel de configurações → especifique o código para incorporar o player. Abaixo ↓ você pode encontrar exemplos de como obter o código.

Vídeo de um produto no catálogo

No Catálogo de produtos, você pode adicionar um vídeo para mostrar o produto. Para fazer isso, acesse o cartão do produto → clique no link "Video" (Vídeo) próximo a qualquer imagem do produto e insira o link para um vídeo do YouTube, Vimeo ou Kinescope ou seu ID.

Como adicionar vídeos aos Feeds

No Feeds, você pode adicionar o vídeo principal da postagem (ele será exibido no início da postagem e usado como capa na lista de postagens) e inserir vários vídeos no texto da postagem do Feeds.

Para adicionar o vídeo principal, vá para o campo com uma imagem no cartão de edição de postagem do Feeds → guia "Vídeo" e cole o link para o vídeo.

O vídeo será exibido no início da postagem.

Para adicionar um vídeo no texto da postagem, clique no ícone de adição à esquerda → adicione um bloco de vídeo → clique nele e especifique o link para o vídeo.

Ao clicar nos três pontos à esquerda do bloco, você pode alterar o vídeo.

O vídeo será inserido no texto da postagem. Salve as alterações.

Depois disso, o vídeo será exibido no texto da página do post.

Como adicionar vídeos usando código HTML

Você pode adicionar vídeos incorporando o código do player no bloco de código HTML. Para fazer isso, acesse as configurações do player ou do serviço para obter o código para incorporação.

No Kinescope, clique no botão com três pontos próximo a um vídeo na lista → Embed → selecione o código responsivo se precisar ajustar o player ao tamanho da tela ou o código fixo para adicionar um player pequeno e especificar seu tamanho e posição no código copiado → cole o código recebido no bloco T123 da categoria "Other" ou no elemento HTML em Zero Block.