ABC da colocação de vídeos do YouTube e do Vimeo no Blogger

Guia prático para incorporar vídeos do YouTube e Vimeo de forma responsiva no Blogger

 

Por: Armindo Guimarães

 

Inserir vídeos num gadget da página inicial do blogue ou nos posts do Blogger pode parecer complicado à primeira vista, mas é simples — e até divertido — quando se entende o processo.

 

Este tutorial foi criado para iniciantes que querem fazer tudo de forma correta, rápida e responsiva.

1. O Princípio da Responsividade

Seja qual for a origem do vídeo, o segredo para ser responsivo (ou seja, não sair da janela do browser no telemóvel) é nunca definir uma largura e altura fixas em pixels.

Código CSS Universal para Vídeos Responsivos

Antes de colocar qualquer vídeo, é uma excelente prática adicionar este código CSS ao tema do seu blogue:

 

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Proporção para 16:9 */
  height: 0;
  overflow: hidden;
  margin: 1rem 0;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Código copiado!

Nota: Se o template não permitir acesso ao "CSS Avançado", cole o código no HTML do blogue antes da tag </head>

2. Colocar um vídeo na página inicial (gadget HTML/JavaScript)

• Copie o código de incorporação do vídeo (YouTube ou Vimeo).
• No painel do Blogger, clique em Layout.
• Escolha a área desejada (ex.: barra lateral) e clique em Adicionar um gadget.
• Selecione HTML/JavaScript e cole o código no campo "Conteúdo".
• Ajuste a largura/altura conforme o espaço disponível.
• Clique em Guardar e visualize o resultado.

Exemplo de gadget com vídeo incorporado

<!-- Vídeo incorporado com acessibilidade -->
<h3 class="titulo-video">Rain Fuse - Cinematic [French Fuse]</h3>
<div class="video-wrapper">
  <iframe 
    src="https://www.youtube.com/embed/8XSLDFHHugs" 
    title="Reproduzir vídeo: Rain Fuse - Cinematic [French Fuse]"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen
    loading="lazy"
    frameborder="0">
  </iframe>
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Rain Fuse - Cinematic [French Fuse]",
  "description": "Rain Fuse-Cinematic, trata-se de uma música do género cinematográfico e de estilo triste.",
  "thumbnailUrl": "https://i.ytimg.com/vi/8XSLDFHHugs/hqdefault.jpg",
  "uploadDate": "2021-12-27T00:00:00+00:00",
  "duration": "PT3M06S",
  "embedUrl": "https://www.youtube.com/embed/8XSLDFHHugs",
  "contentUrl": "https://www.youtube.com/watch?v=8XSLDFHHugs"
}
</script>

Código copiado!

3. Colocar um vídeo num post do Blogger

Método automático (apenas YouTube)

Este é o método mais simples e imediato, mas funciona apenas com vídeos do YouTube:

• No editor de posts, clique em Inserir vídeo.
• Escolha a opção Do YouTube.
• Pesquise e selecione o vídeo.

 

Nota: Este método não está disponível para vídeos do Vimeo.

Método manual (YouTube e Vimeo, com SEO)

Este é o método recomendado para quem pretende fazer tudo de forma profissional:

• Funciona com YouTube e Vimeo.
• Permite código responsivo e dados estruturados (<code>VideoObject</code>).
• Melhora SEO e acessibilidade

No vídeo do YouTube, clique em Partilhar e copie apenas os 11 caracteres do ID antes do ponto de interrogação. Esse ID deve ser colado nas 3 ocorrências do código de incorporação.

Além disso, recolha os seguintes dados para preencher corretamente o código:

• Título
• Duração
• Data de publicação
• Descrição

Nota 1: Se não existir descrição, crie uma breve, por exemplo:

"description": "Rain Fuse - Cinematic: música de estilo cinematográfico com atmosfera melancólica e envolvente.", (não esquecer a vírgula depois do fecho das aspas).

Nota 2: Se houver aspas na descrição do vídeo, devemos usar a barra invertida, por exemplo: 

"description": "Guia prático de incorporação de vídeos no Blogger, mostrando passo a passo como tornar conteúdos responsivos e otimizados para SEO. Este vídeo inclui a explicação: \"Incorporar vídeos é simples\" para motivar iniciantes.", (não esquecer a vírgula depois do fecho das aspas).

Exemplo de formatação da data e duração do vídeo:

"uploadDate": "2021-12-27T00:00:00+00:00" 
"duration": "PT03M06S"
Exemplo com horas, minutos e segundos:
"duration": "PT01H05M30S"    // 1 hora, 5 minutos, 30 segundos
"duration": "PT01H00M00S"    // 1 hora exacta

Exemplo completo com dados estruturados (YouTube)

<h3>Exemplo completo com dados estruturados (YouTube)</h3>
!-- Vídeo incorporado com acessibilidade -->;
h3 class="titulo-video"Rain Fuse - Cinematic [French Fuse]/h3
div class="video-wrapper";
    <iframe 
    src="https://www.youtube.com/embed/8XSLDFHHugs" 
    title="Reproduzir vídeo: Rain Fuse - Cinematic [French Fuse]"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen
    loading="lazy"
    frameborder="0";
    </iframe&;
    </div>;

<script type="application/ld+json";
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Rain Fuse - Cinematic [French Fuse]",
  "description": "Rain Fuse-Cinematic, trata-se de uma música do género cinematográfico e de estilo triste.",
  "thumbnailUrl": "https://i.ytimg.com/vi/8XSLDFHHugs/hqdefault.jpg",
  "uploadDate": "2021-12-27T00:00:00+00:00",
  "duration": "PT3M06S",
  "embedUrl": "https://www.youtube.com/embed/8XSLDFHHugs",
  "contentUrl": "https://www.youtube.com/watch?v=8XSLDFHHugs"
}
</script>

Código copiado!

Exemplo completo com dados estruturados (Vimeo)

<h3>Exemplo com vídeo do Vimeo</h3>
<pre><h3 class="titulo-video";Título do Vídeo no Vimeo;/;
;div class="video-wrapper";
    ;iframe 
    src="https://player.vimeo.com/video/ID_DO_VIMEO" 
    title="Reproduzir vídeo: Título do Vídeo no Vimeo"
    allow="autoplay; fullscreen; picture-in-picture" 
    allowfullscreen
    loading="lazy"
    frameborder="0"&gt;
   ;/iframe&gt;
   ;/div&gt;

   ;script type="application/ld+json";
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Título do Vídeo no Vimeo",
  "description": "Descrição do vídeo do Vimeo",
  "thumbnailUrl": "https://vumbnail.com/ID_DO_VIMEO.jpg",
  "uploadDate": "2024-12-19T00:00:00+00:00",
  "duration": "PT4M03S",
  "embedUrl": "https://player.vimeo.com/video/ID_DO_VIMEO",
  "contentUrl": "https://vimeo.com/ID_DO_VIMEO"
}
  ;/script&gt;

Código copiado!

4. Comparação entre métodos de incorporação de vídeos no Blogger

Método	Plataformas suportadas	Vantagens	Limitações	Recomendado para
Automático (Blogger)	Apenas YouTube	- Muito simples e rápido - Não exige código - Integração direta no editor	- Não suporta Vimeo - Sem metadados estruturados (SEO) - Menor controlo sobre acessibilidade e design	Utilizadores iniciantes ou quem só precisa de inserir vídeos do YouTube de forma rápida
Manual (HTML + SEO)	YouTube e Vimeo	- Funciona em ambas as plataformas - Totalmente responsivo - Permite adicionar dados estruturados (VideoObject) - Melhor para SEO e acessibilidade - Controlo total sobre título, descrição, duração e estilo	- Requer copiar/editar código - Um pouco mais demorado	Quem pretende otimizar o blogue, melhorar SEO e garantir acessibilidade profissional