Player - Galeria de Vídeos responsivos para posts e páginas do Blogger

Tutorial completo de Galeria de Vídeos e de Playlists para Blogger



Por: Armindo Guimarães

Todos os blogueres sabem que uma das funcionalidades não disponibilizadas pelo Blogger é a Galeria de Vídeos, ao contrário da interface Wordpress que possui vários plugins, ainda que com custos.

Entretanto, é indiscutível as vantagens que tal sistema teria face a uma publicação cujo autor pretendesse colocar à disposição dos leitores num só player, determinado número de vídeos com o objetivo de, por exemplo, exortar o leitor à comparação de estilos musicais, de várias formas de executar uma arte, etc.

É certo que existem na Internet várias propostas gratuitas de galerias de vídeo para Blogger, mas todas elas possuem o senão de se limitarem a uns quantos vídeos de formato pequeno que só poderão aumentar de tamanho através de um clique que remete o leitor para o Youtube em vez de o fazer permanecer no blogue, que é o que todo o bloguer pretende. 

Outras propostas requerem sempre a alteração do código HTML do vídeo, no que à altura e largura do player se refere, facto que, por si só, se reflete negativamente no formato responsivo que se pretende para que os vídeos possam ser vistos nos telemóveis em tamanho adequado.  

Existem até propostas que garantem o bom funcionamento da Galeria através de demonstrações "in-locco" que na verdade funcionam, mas apenas naquele caso, já que o código HTML que lhe está subjacente, pura e simplesmente passou a ser recusado pelo próprio Blogger devido às últimas alterações nele efetuadas em julho de 2020.

Para além dos inconvenientes atrás referidos em propostas de Galeria de Vídeos para Blogger que circulam na Internet, outro existe que supera todos eles, designadamente no que concerne à necessidade de tornar responsiva a galeria, atendendo a que os vídeos do Youtube, como se sabe, não são responsivos devido ao facto de todos os códigos de incorporação conterem a largura e altura do player, que podem ser alteradas de forma a melhor se enquadrarem na janela de texto do Blogue, mas que no que aos telemóveis se refere nada está contemplado, pelo que o normal nestes casos será o player aparecer em tamanhos desproporcionados e como tal nada a gosto dos utilizadores.

De tanto matutar na questão, aliando este código àquele, julgo que encontrei uma boa solução que, pese embora não seja uma Galeria de Vídeos das que estamos habituados a ver, tem o condão de ser grátis, de poder ser facilmente implementada em posts e páginas do Blogger e, o que é importante, é cem por cento responsiva, já que o player se adapta a toda a largura da janela do post ou página e, é claro, dos telemóveis.

Como diria o meu amigo Odorico Paraguaçu, vamos botar de lado os entretantos e partir logo para os finalmente:


ETAPA 1
TORNAR OS VÍDEOS RESPONSIVOS

1 - Aconselhamos que utilize um blogue de testes e só depois, se tudo der certo, é que estará à vontade para aplicar no seu blogue.

2 - Entre no Blogger e no lado esquerdo clique em TEMA.

3 – Clique na seta ao lado de PERSONALIZAR.

4 – Se não optou pelo blogue de testes, clique em “Criar cópia de segurança” e depois em TRANSFERIR. Deste modo, todos os dados do blogue até à data ficarão salvaguardados para o caso de algo não correr como o previsto.

5 – Volte a clicar na seta ao lado de PERSONALIZAR.

6 – Clique em “Editar HTML”.

7 – Dentro da caixa do HTMl, coloque o cursor do rato numa área em branco e tecle Ctrl + F.

8 – Na janela de pesquisa que irá expandir no topo da caixa do HTML, digite ]]></b:skin> e tecle Enter para localizar o referido ]]></b:skin>

9 – Acima dessa linha cole o código HTML que a seguir apresentamos:

NOTA: copie o código abaixo e cole-o no Bloco de Notas do seu computador. De seguida, copie o código do Bloco de Notas e cole-o no HTML do blogue. Desta forma, o código será colocado totalmente limpo. Caso contrário, junto com ele irão uma série de caracteres que não se veem, mas que em nada abonam a favor do HTML e do próprio blogue.  

- Copiar e colar código no HTML do blogue, acima de ]]></b:skin>

.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; } .video-wrapper object, .video-wrapper embed, .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

9 – No topo da caixa, do lado direito, clique em “Guardar”

ETAPA 2
COLOCAÇÃO DE 1 VÍDEO NO POST OU PÁGINA

- Copiar o código abaixo e colar no HTML do post ou página, na parte do texto onde pretende colocar o vídeo, substituindo apenas o código ID do vídeo com 11 caracteres, que aparece a seguir a /embed/.

Nota: As caixas que contêm os códigos podem ser ser aumentadas de tamanho se no canto inferior direito das mesmas as arrastarmos para o lado direito e/ou para baixo. 


NOTAS:

1 – Para obter o código ID de 11 caracteres no vídeo do Youtube que pretende colocar no post ou página, clique em “PARTILHAR”. Do link que aparece, por exemplo, https://youtu.be/iKfRYvw0--o, copie apenas os 11 últimos caracteres que são o chamado ID do vídeo.

2 - Devido ao código responsivo que colocamos no HTML do blogue, o player de vídeo vai ajustar-se à largura da janela do post ou da página, bem como à largura dos telemóveis, motivo porque no código não aparece a largura nem a altura do vídeo.


COLOCAÇÃO DE PLAYER COM 2 OU MAIS VÍDEOS

1 – O código suporta um número infinito de vídeos que podem ser vistos num só player do post ou página. Apenas por uma questão de estética não é aconselhável o uso exagerado de links (vídeos), tudo dependendo dos fins.

2 – Tal como no player de 1 só vídeo, apenas temos que colocar o ID dos vídeos que pretendemos colocar no player-galeria constituído pelos últimos 11 caracteres do link de partilha.

4 – De notar que o ID do primeiro vídeo (e apenas este), deve ser repetido a fechar o código, conforme exemplo abaixo para um player com 4 vídeos:

5 – Para além do ID dos vídeos, colocamos no espaço assinalado, o Nome do interprete e o Título do vídeo.


6 – Conclusão: os quatro primeiros parágrafos do código acima correspondem a 4 vídeos e o quinto parágrafo, a fechar, leva o ID do primeiro vídeo. Colocamos de propósito o código com parágrafos (uma linha em branco entre os vídeos) apenas para melhor exemplificar, mas na prática tais linhas em branco não são necessárias.

7 – O presente código tem apenas 4 vídeos. Para acrescentarmos outro ou outros vídeos, só temos que incluir o respetivo código e ID do vídeo que pretendemos. Assim:

<p><a href="http://www.youtube.com/embed/GtBFVefFnFg?rel=0" 
target="janela"><span style="font-family: verdana;">Nome do intérprete – 
Título do vídeo</span></a></p>


Nota: tal como no caso do player de 1 só vídeo, devido ao código responsivo que colocamos no HTML do blogue, o player-galeria de vídeos vai ajustar-se à largura do post ou da página, bem como à largura dos telemóveis.

Eduardo Lages – Cavalgada

Rodrigo Leão – Ave Mundi

Dulce Pontes – Canção do Mar

Vanesa Martín|Matias Damásio – Porque queramos vernos


ETAPA 3
COLOCAÇÃO DE PLAYER COM UMA PLAYLIST

Para colocação de um player com uma playlist ou um player-galeria com 2 ou mais playlist, o processo é o mesmo que indicamos para os vídeos, apenas com as seguintes alterações nos códigos:


COLOCAÇÃO DE PLAYER COM 2 OU MAIS PLAYLIST


Nota: O código da playlist é retirado de parte do link de partilha da playlist, como por exemplo, este:

https://www.youtube.com/watch?v=k9X2QtzCvBQ&list=
PLMG6-OLBIeMGzkIWYKjhaSi5VW5eCGFMz

Duetos Lusófonos

Supertramp

As Minhas Músicas de Sempre


E chegamos ao fim deste tutorial, no qual inserimos, a título de demonstração, um player com um vídeo, um player-galeria de vídeos e um player-galeria de playlists.

Qualquer dúvida pode ser colocada na janela de Comentários deste post, sendo que prometemos ser breves na resposta. 

Enviar um comentário

2 Comentários
* Gostou do que leu, viu e/ou ouviu? Então, para completar, só falta o seu comentário. Se não gostou, comente também. O autor agradece.
  1. Os seus posts a nível de tecnologia têm características muito interessantes: são sempre actuais e relevantes, respondem a reais necessidades e desafios que quem anda neste meio digital em lazer ou por trabalho enfrenta no dia-a-dia e são escritos numa linguagem acessível e muito demonstrativa que elucida perfeitamente o leitor. Particularmente, porque lido com este meio todos os dias, as suas dicas têm sido bastante úteis e coloco em prática muitas delas, pelo que o meu pedido é que continue com este tipo de publicações. Muito bom! Obrigada pela partilha!

    ResponderEliminar
    Respostas
    1. Menina Carla, gostei de saber que aprecia as minhas dicas.
      Aprendemos todos uns com os outros e por isso tento passar o melhor que sei para quem estiver interessado.
      Muito obrigado.

      Eliminar

buttons=(OK!) days=(20)

Este site utiliza cookies para tornar a sua experiência melhor. Saiba mais
Accept !