Como adicionar um vídeo à página

Para adicionar um bloco com vídeo à página, abra a Biblioteca de Blocos e acesse a categoria “Vídeo”.

Para enviar um vídeo para Tilda, clique em “Conteúdo” em qualquer bloco da categoria “Vídeo” e, no campo “Fonte do vídeo”, selecione MP4 ou WEBM. Em seguida, clique no ícone de envio de arquivo. Você pode enviar um vídeo nos formatos MP4 ou WEBM com até 5 MB.

Você pode adicionar vídeos do YouTube usando os blocos VD01 (Vídeo), VD04 (botão “Reproduzir”), VD06N (Vídeo em várias colunas), VD08 (Texto e vídeo em duas colunas), VD09 (vídeo em janela pop-up), VD11 (Vídeo com capa personalizada), VD12 (Vídeo e imagem em uma linha), VD13 (transmissão ao vivo do YouTube com chat ao vivo), VD14 (lista de reprodução de curso em 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, vá para a guia 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".

Você pode adicionar os vídeos do Vimeo usando os blocos VD01 (Vídeo), VD04 (botão “Reproduzir”), VD06N (Vídeo em várias colunas), VD08 (Texto e vídeo em duas colunas), 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 curso em 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.

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 (o parâmetro hash ?h=) 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.

Você pode fazer o upload do vídeo para o seu servidor e inseri-lo nos blocos com vídeo HTML5. Esses blocos são: VD01 (Vídeo), VD04 (botão “Reproduzir”), VD08 (Texto e vídeo em duas colunas), VD09 (vídeo em janela pop-up), VD11 (Vídeo com 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), 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 desse tipo à página, você precisa usar arquivos de vídeo WebM e MP4. Você pode converter vídeos para esses formatos usando conversores online ou softwares de edição ou conversão de vídeo.

Em seguida, hospede-o e obtenha um link direto para o arquivo. Observe que provavelmente você precisará usar um serviço de hospedagem de arquivos pago, pois nem todos os serviços de armazenamento de arquivos oferecem esse recurso.

Assim que obtiver o link para o arquivo, acesse o conteúdo do bloco com vídeo HTML5 e adicione o link para seus vídeos nos dois formatos nos campos correspondentes.

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.

Você pode adicionar os vídeos do Kinescope usando os blocos VD01 (Vídeo), VD04 (botão “Reproduzir”), VD08 (Texto e vídeo em duas colunas), VD09 (vídeo em janela pop-up), VD11 (Vídeo com capa personalizada), VD12 (Vídeo e imagem em uma linha), VD14 (Lista de reprodução do curso em vídeo), AB701 (Título, descrição e vídeo), BF402N (Vídeo ou imagem e formulário em duas colunas) e alguns blocos com uma imagem em tela cheia como plano de fundo.

Para começar a trabalhar com o Kinescope, você precisa se cadastrar no site https://www.kinescope.com/ ou fazer login na sua conta.

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.

Você pode adicionar vídeos com iFrame usando os blocos VD01 (Vídeo), VD04 (botão “Reproduzir”), VD08 (Texto e vídeo em duas colunas), VD09 (vídeo em janela pop-up), VD11 (Vídeo com capa personalizada), VD12 (Vídeo e imagem em uma linha), VD14 (Lista de reprodução de curso em vídeo), AB701 (Título, descrição e vídeo), BF402N (Vídeo ou imagem e formulário em duas colunas).

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

Com esta opção, as configurações “Reprodução automática de vídeo” e “Vídeo com som silenciado” não funcionarão. Se a plataforma que hospeda o vídeo permitir, você pode inserir os parâmetros Autoplay e Mute no link.

Você pode usar um vídeo como capa ou em outros blocos com uma imagem de fundo, em vez de uma imagem de fundo estática. Acesse a guia Conteúdo e cole o link do seu vídeo no campo correspondente. Você pode enviar seu vídeo para Tilda, usar um link de vídeo do YouTube ou um link de vídeo HTML5 obtido seguindo o guia acima.

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

Este bloco suporta 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 para cada vídeo da lista de reprodução deve ser especificado em uma nova linha.

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 específico ou editores online, como o Veed.io).

Depois disso, envie o arquivo para Tilda para um serviço que ofereça armazenamento de vídeo e acesse-o por meio de um link direto. Se você enviou o vídeo para um serviço de terceiros, indique o link direto para o arquivo no Tilda.

Você pode adicionar a versão de pré-visualização do vídeo, se desejar. Isso pode ajudar os usuários a ter uma ideia geral do vídeo principal e reduzir o tempo de carregamento do site.
O tamanho ideal do vídeo é 200 px 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.

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.

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.

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.

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.