Como deixar os vídeos responsivos em qualquer tema para WordPress

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 wp_responsive_video_oembed_script() {
    wp_enqueue_script("responsive_oembed_js", get_template_directory_uri() . '/js/responsive-oembed.js', 'jquery_js', '', true);
}
add_action('wp_enqueue_scripts', 'wp_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.

Tags: , , , ,