Como colocar uma galeria de vídeos do Youtube no blog?

em 16 de fevereiro de 2015

Hey, pessoas!
O tutorial de hoje é algo que já me pediram algumas vezes, e eu nunca havia tentado fazer.
Pesquisei, e em nenhuma das minhas buscas achei algo que fosse simples de fazer e que pudesse ser explicado de forma clara e simplificada.
Daí fiquei pensando...

E descobri um modo de criar a galeria de vídeos, adaptando um outro código que uso pra exibir os ícones de redes sociais.
Para ver a galeria como fica role a página até o final, eu coloquei algumas de minhas vídeo-aulas ao final do blog.
Também coloquei em um blog de testes porque um dia posso não ter mais a galeria aqui...
Veja:

Demonstração do tutorial

Vamos aprender?

Para começar você precisa ter os códigos dos vídeos que deseja inserir na galeria.
Podem ser vídeos seus, caso você possua um canal Youtube (alô youtubers de beleza!), ou vídeos de terceiros que possam ser compartilhados.

Em ambos os casos você precisa apenas do código de cada vídeo, que você consegue indo ao Youtube e clicando em Compartilhar abaixo do vídeo escolhido.
Assim:


Quando você clica em Compartilhar abrem as opções, escolha Incorporar.
Vai aparecer o código, que está marcado em azul na minha imagem de exemplo.
Esse é o código do vídeo, exatamente assim:

<iframe width="560" height="315" src="https://www.youtube.com/embed/j3Rhf1bHHKk?list=UU7RDVmGfFX7W82vy1qU410Q" frameborder="0" allowfullscreen></iframe>

Você pode alterar a largura (expressa em width) e a altura (expressa em height).
No caso da minha galeria os tamanhos são 220 de largura e 188 de altura.
No trecho em vermelho é o endereço do vídeo, e, claro, cada vídeo tem o seu endereço próprio.

Agora que você já tem os códigos dos vídeos que deseja vou te mostrar como montar o script.

Copie este código:

Copiar o código

Depois de copiar o código cole-o em um bloco de notas para ser editado, ou em post de rascunho no blog, se preferir.
Edite-o seguindo as dicas abaixo:

Modificações necessárias para a galeria funcionar

Largura total da galeria:
Esse valor, que no código marquei em azul) depende de onde você deseja inserir a sua galeria e da largura de seu blog. E depende de quantos vídeos você quer exibir, e da largura de cada um deles.

Vou tomar como exemplo a minha galeria, ok?
É uma conta simples: se cada vídeo mede 220px de largura 3 vídeos medirão 660px de largura.
Acrescente as margens, por exemplo 10px e a largura total de sua galeria será 670px.
Aumente o valor das margens se desejar mais distância entre os vídeos.
Se medirem 300px, por exemplo, você precisará de 910px para que caibam, e assim por diante.

E, claro, a galeria precisa caber na área onde for inserida.
Para isso você precisa definir onde vai colocar e saber a largura da seção onde pretende colocar.
Veja esse exemplo, eu coloquei acima da área do post, que mede 700px. Coube certinho.

Neste outro exemplo coloquei abaixo do menu, e a área aí é de 1000px.
Nesse caso coloquei os vídeos em tamanho maior, e ficou bem legal.
Então, reforçando: a largura total da galeria depende do tamanho de cada vídeo e do local onde a galeria ficará.

Inserindo os códigos de cada vídeo:
No espaço que está escrito AQUI O CÓDIGO DO VÍDEO 1, coloque, claro, o código do primeiro vídeo a ser exibido na galeria.
Onde está AQUI O CÓDIGO DO VÍDEO 2  coloque o código do segundo vídeo a ser exibido, e assim sucessivamente.

Se quiser colocar mais de 3 vídeos repita este código, que é o código referente à cada vídeo na galeria:
<td style="text-align: center;"valign="undefined">AQUI O CÓDIGO DO VÍDEO 1</td>

O script finaliza assim:
</tr> 
</tbody> 
</table>
</center>
Então, se quiser inserir mais vídeos tem que ser acima desse trecho, tá?

Inserindo a galeria de vídeos no blog

Vá ao seu painel administrativo e clique em Design. Escolha Adicionar um gadget e selecione a opção HTML/JAVASCRIPT, e dentro da caixa que expandir cole o código completo, já editado e com os endeços dos vídeos escolhidos.
Coloque título em seu gadget, caso queira (no meu blog de testes eu não coloquei), salve e coloque onde deseja que fique.
Salve as alterações do layout e voilà!
Está feito!

É bem simples, está explicado da forma mais didática que consegui, então leia e releia até se certificar de haver entendido. Garanto que se fizer com atenção dará certo.

Caso queira ter em seu blog mas não tenha conseguido ou não tempo para fazer entre em contato comigo, nós combinamos o valor bem em conta e eu faço para você.



Gostou do tutorial?
Curta, compartilhe! São ações assim que motivam e ajudam a alimentar o blog...

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

15 comentários , comente também!

  1. Mais um tutorial fantastico, Elaine!! ♥♥♥ Obrigada por compartilhar-lo com a gente!!

    ResponderExcluir
  2. Salvou o meu dia <3 precisava de um tutorial assim, e não encontrava em lugar algum, até encontrar aqui >_<

    ResponderExcluir
  3. Opa vlw linda nossa vc não sabe o q eu passei e onde fui para conssegui coloca video no meu blog e nao deu em nada, um mais deficil do q o outro e no fim nada mas graça a vc eu conssegui. obrigado msm.

    ResponderExcluir
  4. Simplesmente Amei! Muito obrigado por dividir seu conhecimento conosco, com suas dicas eu finalmente estou conseguindo construir meu Blog...bjs !!!!

    ResponderExcluir
  5. Oi Elaine, vc pode passar o código que bloqueia a apresentação de videos além do que a gente quer rodar no Blogger? Explicando: quero colocar meus videos , mas evitar que ao final videos de concorrentes sejam reproduzidos no meu blog
    Grata

    ResponderExcluir
    Respostas
    1. Celia, essa configuração é feita no Youtube, quando você clica em Compartilhar já aparece a opção de mostrar ou não vídeos relacionados.
      Opte por não e os vídeos não aparecerão;

      Excluir
  6. Amei este tutorial,excelente suas dicas, se desejar visite meu blog,aceito opiniões .

    ResponderExcluir
  7. Olá Eliane tudo bem? Muito obrigado por disponibilizar o código da galeria de vídeos, Foi muito importante para mim. Se você tiver um tempo extra daria para me dar uma dica de como configurar o código para ser alinhado com o texto? Exemplo: sempre que coloco um vídeo junto com o nome no lugar onde fica o numero do vídeo e o nome for um pouco longo, a galeria fica desalinhada. Desde já muito obrigado! AMEI SEU BLOG!!!

    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…