Uma das funcionalidades mais bacanas do WordPress é a facilidade com que podemos inserir vídeos do YouTube, Vimeo e serviços semelhantes em posts e páginas, graças ao recurso oEmbed. Antigamente o costume era pegar o código de incorporação e inseri-lo no HTML do post. Hoje em dia, graças ao oEmbed, basta pegar o link direto de acesso ao vídeo, colar no editor de texto (e não no código HTML) e o WordPress automaticamente gera a incorporação do vídeo na postagem, agilizando bastante o procedimento.
Mas falta uma coisinha para que a publicação de vídeos no WordPress fique perfeita: responsividade. Os vídeos publicados dessa maneira não ficam responsivos em todos os temas, ficando com tamanho inadequado nas telas dos dispositivos móveis. O atual tema padrão do WordPress, o Twenty Seventeen, já garante a responsividade dos vídeos publicados, mas há situações nas quais o tema utilizado é um pouco mais antigo e ainda não suporta essa forma de exibição… ou talvez você esteja desenvolvendo seu próprio tema para WordPress e não sabe ainda como implementar a responsividade desse tipo de conteúdo.
Felizmente existe um meio de resolvermos este problema. Encontrei um tutorial na internet de autoria de um desenvolvedor chamado Will Rees. O método dele ainda funciona, mesmo tendo sido criado em 2015. Fiz alguns testes, atualizei algumas coisas, comprovei seu funcionamento e resolvi repassar esse conhecimento para vocês.
Confira agora como fazer os vídeos publicados em seu blog ou site com WordPress ficarem responsivos. O procedimento a seguir funciona para vídeos hospedados no YouTube, Vimeo e DailyMotion.
Passo 01: criando o código CSS para responsividade
O código a seguir foi obtido do excelente site Embed Responsively, que gera CSS responsivo para códigos de incorporação de diversos serviços automaticamente.
Eu já coletei o CSS gerado por este site e o ofereço abaixo. Copie-o e cole-o dentro do arquivo style.css do tema do seu site ou blog:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Passo 02: criando o código jQuery
Crie um arquivo JavaScript e salve nele o código jQuery abaixo. Neste exemplo eu salvarei o arquivo com o nome responsive-oembed.js:
jQuery(document).ready(function($) {
var $all_oembed_videos = $("iframe[src*='youtube'], iframe[src*='vimeo'], iframe[src*='dailymotion']");
$all_oembed_videos.each(function() {
$(this).removeAttr('height').removeAttr('width').wrap( "<div class='embed-container'></div>" );
});
});
Salve este arquivo em uma pasta dentro da pasta do tema. Neste exemplo eu criarei uma pasta /js e salvarei o arquivo lá dentro.
Não se preocupe em importar a jQuery, pois o WordPress já traz sua própria implementação dessa biblioteca JavaScript em seu núcleo.
Passo 03: chamando o código jQuery a partir do functions.php
Agora abra o arquivo functions.php do seu tema. Vamos usar a função wp_enqueue_script(); do WordPress para chamar o código jQuery que acabamos de criar. Basicamente copie o código abaixo e cole-o no functions.php:
function gs_responsive_video_oembed_script() {
wp_enqueue_script("responsive_oembed_js", get_template_directory_uri() . '/js/responsive-oembed.js', 'jquery_js', '', true);
}
add_action('gs_enqueue_scripts', 'gs_responsive_video_oembed_script');
Repare no trecho '/js/responsive-oembed.js': é aqui que a função irá apontar para o arquivo JavaScript de responsividade. Certifique-se de que a função esteja apontando para o arquivo correto, no lugar correto.
Testando os vídeos responsivos
Agora insira um vídeo qualquer do YouTube, Vimeo ou Dailymotion em um post ou página, publique e visualize a publicação com seu smartphone ou tablet (ou use o modo de responsividade do Firefox ou do Chrome) para testar a responsividade do vídeo publicado. Se tudo der certo, o tamanho do vídeo se ajustará automaticamente ao tamanho da tela sem nenhum esforço extra da sua parte. 😉
Eu implementei essa funcionalidade no tema deste blog. Vejam só como funciona na demonstração abaixo:
Este método funciona com qualquer tema base para WordPress, mas infelizmente eu não consegui fazer funcionar em temas filhos. Atualizarei este post caso eu consiga.
