Se você chegou até aqui porque, de alguma forma, os vídeos do Youtube ou do Vimeo não estão se adequando à largura de tela do seu site ou template WordPress, então veio ao lugar certo!
Neste artigo vamos ensinar como inserir, incorporar ou deixar qualquer vídeo responsivo no seu template WordPress, seja ele do Youtube ou do Vimeo.
Apesar de existirem centenas de tutoriais explicando como deixar o embed do Youtube e o embed do Vimeo responsivos, em alguns casos as soluções encontradas não satisfazem completamente o usuário, deixando pequenas falhas e/ou erros.
Por isso, nosso objetivo é ensinar as duas melhores formas de resolver este problema de uma vez por todas.
Seções desta página
Erros de indexação de vídeo
Antes de mostrarmos a solução deste problema, é importante ressaltar que vídeos que ficam fora da área visível do visitante, além de diminuir a experiência do usuário, pode afetar diretamente na indexação de uma página na busca orgânica.
Inclusive, o Google Search Console vem alertando seus editores para corrigirem com urgência todos os vídeos inseridos e/ou incorporados que se encontram fora da janela de visualização.
Deixar vídeo do Youtube e Vimeo responsivo usando CSS
O primeiro método que vamos ensinar é como incorporar qualquer vídeo responsivo do Youtube e Vimeo usando uma folha de estilos CSS junto com um código que deverá ser inserido no arquivo functions.php do seu layout WordPress.
Partindo do princípio de que você tenha um pouco de conhecimento técnico e saiba como editar os arquivos do seu template, abra o arquivo style.css e cole o seguinte código abaixo:
/*### YOUTUBE AND VIMEO RESPONSIVE - STYLE CSS ###*/
.video-container{
position:relative;
padding-bottom:50.25%;
padding-top:30px;
height:0;
overflow:hidden;
margin-bottom:1em;
}
.video-container iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}Code language: CSS (css)Em seguida, abra o arquivo functions.php e cole o seguinte comando:
/*### YOUTUBE AND VIMEO RESPONSIVE - FUNCTION ###*/
function video_embed_responsivo( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'video_embed_responsivo', 10, 3 );
add_filter( 'video_embed_html', 'video_embed_responsivo' );Code language: PHP (php)Feito isso, todos os vídeos do Youtube e do Vimeo publicados no seu site ficarão automaticamente responsivos, como em um passe de mágica!
- Como instalar plugins e templates WordPress via cliente SFTP
- Como configurar um site de testes no WordPress
Inserir vídeo responsivo do Youtube e Vimeo usando plugin
Caso você não queira se aventurar no mundo dos códigos, nossa recomendação é instalar e ativar o plugin EmbedPress (Embed Google Docs, YouTube, Maps, Vimeo, Wistia Videos & Upload PDF, PPT in Gutenberg & Elementor).
Como o próprio nome diz, este plugin é praticamente um canivete suíço que consegue incorporar (embed) quase todos os tipos de mídias dentro de um layout ou template WordPress de forma simples, prática e bem direta, independente se você usa o Editor de Blocos, Editor Clássico ou Elementor.
E uma vez que o plugin esteja ativo em seu site ou blog WordPress, navegue pelo menu lateral do painel de controle do WP, clique em EmbedPress, selecione a largura/altura ideal e salve. Simples assim!
Então, basicamente, para que você consiga deixar todos os vídeos do Youtube e/ou Vimeo responsivos, esta é uma ótima opção para sua demanda!
Qual a melhor opção para deixar Youtube e Vimeo responsivo
Independente se a sua escolha seja utilizar o código inserido de forma manual ou se for usando o plugin para WordPress EmbedPress, o que vale é saber que a partir de agora todos os vídeos que você publicar em seu site ou blog estarão totalmente responsivos e vão se adaptar a qualquer tipo ou tamanho de tela.
E, para evitar qualquer problema de indexação, incluindo erros com vídeos fora da janela de visualização e/ou fora da área visível do visitante, comece imediatamente as correções.
Fica a dica!
Foto: Alexander Shatov via Unsplash.