Como tornar os vídeos do YouTube responsivos

Publicados: 2022-10-27

Ao incorporar um vídeo do YouTube em seu site, você provavelmente descobriu um problema menor, mas muito irritante: as incorporações do YouTube não são responsivas nativamente. Isso significa que, quando você está visualizando sua página da Web em um dispositivo móvel, por exemplo, o vídeo não é redimensionado corretamente com o restante dos elementos da página. Isso pode afetar negativamente o design e a usabilidade do seu site. Então, por que isso acontece, e o que você pode fazer sobre isso?

Por que os vídeos do YouTube não são responsivos

Incorporações padrão do YouTube, como a abaixo, usam iFrames para gerar um player de vídeo incorporado:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/5kW0RtcJZC8″ title=”YouTube video player” frameborder=”0″ allow=”acelerômetro; Reprodução automática; gravação na área de transferência; mídia criptografada; giroscópio; picture-in-picture” allowfullscreen></iframe>

A vantagem de usar iFrames? É um pedaço simples de HTML. Além disso, permite que as incorporações do YouTube sejam compatíveis com a mais ampla seleção possível de casos de uso, aplicativos e sistemas de gerenciamento de conteúdo. O YouTube também pode atualizar incorporações de vídeo existentes com, por exemplo, novos estilos de player ou scripts de publicidade do lado do servidor sem exigir que os usuários alterem o código em seus sites. Isso funciona porque um iFrame atua essencialmente como uma janela para uma página diferente.

Os vídeos às vezes não são exibidos corretamente em determinados tamanhos de tela. O vídeo acima não cabe na tela.

Mas também há uma desvantagem. O uso de iFrames pode tornar os vídeos do YouTube mais lentos para carregar em qualquer página. Também pode significar que os vídeos nem sempre são visíveis na primeira pintura, pois um navegador precisa encontrar e carregar o iFrame antes de poder carregar o vídeo. Finalmente, e mais frustrantemente, sem CSS ou Javascript, não há uma maneira nativa de fazer com que os vídeos do YouTube se adaptem a um contêiner. É por isso que a incorporação especifica um tamanho (560 x 315 por padrão).

Como consequência, para tornar uma incorporação do YouTube realmente responsiva e otimizada para exibição em dispositivos móveis, você precisa fazer um pouco de trabalho extra. Felizmente, existem vários maios simples para fazer isso acontecer.

Método 1: Com um pouco de CSS personalizado

A maneira mais simples de usar CSS para criar incorporações responsivas é criar uma classe que apresente a propriedade “aspect-ratio”. Essa propriedade permite estipular a proporção da classe que você está criando, de forma que ela seja sempre redimensionada dentro de um contêiner ao longo dessa proporção. Dado que os vídeos incorporáveis ​​do YouTube são todos apresentados com uma proporção de 16 × 9, isso significa que você pode usar a propriedade para garantir que tudo seja dimensionado de acordo.

Vejamos como o método um funciona.

Primeiro, crie uma classe como “youtube-video”. Em seguida, dê a propriedade proporção de aspecto definida para 16/9 com a largura em 100%.

 .youtube-video { aspect-ratio: 16 / 9; width: 100%; }

Você precisará aplicar essa classe a qualquer incorporação do YouTube no código, removendo a estipulação padrão de largura e altura.

 <iframe class="youtube-video" src="https://www.youtube.com/embed/5kW0RtcJZC8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Este método é muito simples para qualquer pessoa confortável em editar CSS e HTML básicos. No entanto, requer algum trabalho para cada incorporação individual do YouTube. Isso não é o ideal, especialmente para sites com vários autores e editores que provavelmente tentam incorporar vídeos do YouTube em páginas e postagens.

Método 2: Com Gutenberg Blocks em temas responsivos

Alguns temas do WordPress, como Inspiro e responsivo, possuem recursos que automatizam a capacidade de resposta para incorporações de vídeo. Portanto, se você estiver aberto a alterar seu tema e modelos, basta instalar um deles. Esses temas têm uma regra CSS semelhante ao método um que é incorporado ao tema. Essa regra será aplicada a determinados blocos e apresentada dentro do tema.

Em outras palavras: se você usar o bloco “vídeo” do Gutenberg, onde você cola a URL do vídeo do YouTube que deseja incorporar, seus vídeos permanecerão responsivos.

No entanto, certifique-se de testar esses temas com seu site primeiro. A implementação específica pode não funcionar perfeitamente com seus vídeos.

Método 3: Com o plugin Yoast Video SEO

Se você é um usuário do WordPress, a maneira mais simples e rápida de resolver esse problema é com o plugin Yoast Video SEO. Além de automatizar a inclusão de metadados, que faz com que seus vídeos sejam classificados nos resultados de pesquisa do Google, o JavaScript redimensiona automaticamente a incorporação do vídeo para qualquer dispositivo e tamanho de navegador. Além do tamanho do contêiner, o vídeo ajustará sua altura e largura à medida que a página for dimensionada. Portanto, você não precisa se preocupar em implementar CSS personalizado ou testes de navegador cansativos!

Além disso, o plugin Yoast Video SEO usa JavaScript assíncrono para acelerar o tempo de carregamento dos vídeos do YouTube o máximo possível. Isso garante que seus vídeos sejam entregues da melhor maneira possível para garantir altas taxas de reprodução e engajamento. O plug-in custa US $ 79 por ano, leva apenas alguns minutos para instalar e configurar e garante que você nunca mais precise se preocupar com vídeos responsivos.

Resumo

Os vídeos são uma ótima ferramenta para usar em seu site. As pessoas os amam! Mas se eles não escalarem com o resto do seu site, eles podem parecer desajeitados. Felizmente, existem várias maneiras de garantir que seus vídeos incorporados sejam responsivos. Seja com um pouco de CSS personalizado ou instalando um plugin útil como o Yoast Video SEO, você pode garantir que seus vídeos do YouTube sejam redimensionados corretamente. Você também pode optar por alterar seu tema para um que tenha capacidade de resposta automática de vídeo. Se tiver mais dúvidas ou sugestões, deixe nos comentários.

Leia mais: YouTube vs seu próprio site: Qual é o melhor para SEO de vídeo? »