19 de maio de 2023

Dicas para Blogger 33 - Como tornar TODOS os vídeos responsivos em mobile

Pode parecer estranho, mas mesmo com o Blogger e o Youtube sendo ambos do Google, eles nem sempre trabalham bem em equipe, muitas vezes você irá postar um vídeo que ficará perfeito na versão desktop (computador) do site, mas ficara horrível na versão mobile (celular/tablet) dele, seja porque ele ficou muito pequeno ou muito grande. Mas hoje eu vou te ensinar de maneira rápida como resolver esse problema.

Como tornar TODOS os vídeos responsivos em mobile de uma só vez

Se você notou que seus vídeos em mobile estão no tamanho errado, quero primeiro que saiba que isso é bem comum, principalmente em sites que já foram modificados antes, mas se você pesquisar como arrumar isso na internet vai notar que a grande maioria dos tutoriais ensinam a arrumar um vídeo especifico usando um site que transforma o vídeo em responsivo, ou seja, se você quiser arrumar o problema então teria de ir de vídeo em vídeo, em todas as matérias do seu site, arrumando um por um, mas com o nosso método você irá arrumar todos os vídeos do Youtube no seu site de uma vez só. Então vamos lá, é bem fácil.
Primeiro você tem de clicar na seção "Tema" do seu Blogger, e depois na flecha ao lado de "Personalizar", aí no novo menu você clica em "Editar HTML":

Agora no meio do seu código HTML você irá procurar por: 

/b:skin ou, dependendo do seu código, ]]></b:skin>


Logo acima desse código você irá colar o seguinte código:

.mobile .post-body iframe {width: 100%; display: block;}
.mobile .post-body img {width: 100%; display: block;}

Ficando algo desse tipo aqui:

E pronto! Clique em salvar e confira no seu site, que deve ter ficado com todos os vídeos responsivos, mas responsivos apenas na versão mobile do seu site, a versão de desktop deve ter continuada a mesma.
Abaixo você confere o antes e o depois:

Isso deve ter resolvido tanto os vídeos que ficavam minúsculos quanto os que ficavam gigantes e saiam da borda do site.
Ah, mas é sempre bom avisar que esse tutorial talvez não dê certo dependendo do quanto o seu site já foi customizado no passado, ou seja, dependendo do quanto do seu código já foi mudado.
Mas é basicamente isso, seus vídeos devem estar certinhos agora sem a necessidade de arrumar um por um. Se essa dica te ajudou por favor deixe um comentário para o Google saber que ela talvez possa ajudar outras pessoas, e, claro, dê uma passadinha em nossa
página oficial e leia as outras partes dessa série de dicas. Obrigado e até a próxima!

Nenhum comentário:

Postar um comentário