Como tornar responsivos os vídeos postados no blog? - * Blog Elaine Gaspareto *

Como tornar responsivos os vídeos postados no blog?

Publicado em 30/05/2018


Você costuma incorporar vídeos (próprios ou quaisquer outros) em seus posts do blog?
Eu costumo, especialmente nas publicações da categoria Dicas para blogs.
Acontece que, hoje em dia, muita gente acessa os blogs de celulares ou tablets, então precisamos ter blogs que se adaptam ao mundo mobile, né?
Além do template responsivo como é o meu (não sabe o que é design responsivo? leia esse post e entenda tudo!) é preciso que os elementos que inserirmos nos posts também sejam responsivos.
Hoje vou te mostrar como tornar responsivo o vídeo que você quiser incorporar ao seu post.
Vamos aprender?
Se liga no truque, é simples e só requer 2 passos simples.

Como deixar responsivos os vídeos publicados no blog?


Antes de mais nada acesse a página com os códigos necessários:


Copiar o código


Vamos criar uma div para os vídeos que a gente for publicar no blog.
Para fazer isso acesse o painel administrativo de seu blog e clique na aba Tema.
A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F
Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO CSS e salve.

Agora vamos aprender como inserir corretamente o vídeo dentro da postagem no blog.
Crie um post novo normalmente (ou edite algum existente) e depois de pronto selecione o vídeo que deseja incorporar.
Note que todo vídeo do Youtube possui um código alfanumérico próprio e individual.
Em geral esse ID aparece no navegador quando acessamos o vídeo.
Assim:
https://www.youtube.com/watch?v=1pftOS0vLOg

A terminação depois de v= é o ID do vídeo.
Olha lá no Youtube, todo vídeo tem o seu. Reserve o ID do vídeo que quer incorporar.

No editor de postagens do blog (lá onde você escreve ou edita seus posts) clique em HTML, no alto.
Essa ação vai reverter o texto para o modo HTML.
Cole o CÓDIGO HTML do vídeo responsivo onde deseja que o vídeo apareça e no campo que eu marquei CÓDIGODOVÍDEO cole, claro, o ID do seu vídeo.
Clique em Escrever para voltar o editor ao normal e publique normalmente seu post.
Sim, só isso.

Importante:
Toda vez que for publicar um vídeo precisa inserir esse CÓDIGO HTML no post, ok?
Não se aplica automaticamente aos vídeos já postados, tem que editar todos se quiser que sejam responsivos.
Reforçando: para que funcione sempre precisa inserir dentro da div que criamos, e o modo de fazer é este: reverter o post para o modo HTML, colar o CÓDIGO HTML e adicionar o ID do vídeo no local marcado com CÓDIGODOVÍDEO


Ah, dica extra: mesmo se seu template não for responsivo e sim adaptado para a versão mobile ainda dá pra usar os vídeos responsivos.
Pode inserir, dá certinho!
Legal, né?
Faz em seu blog e me diz!
Enjoy!





1 comentários via Blogger
comentários via Facebook

Um comentário:

  1. Eu nem fazia ideia que dava pra adaptar os vídeos também. Pena que é só pra blogger...
    Meu blog é wp, mas vou procurar pela net algum tutorial que me ajude com isso no wp também.

    www.caprichosamente.com

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…