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

DO TEXTO: Saiba como colocar uma Galeria de Vídeos nos posts e páginas do Blogger.

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

ATUALIZAÇÕES: 

04-09-2023 | 12-09-2023

Por: Armindo Guimarães

https://www.portalsplishsplash.com/p/armindo-guimaraes.html

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> e Guarde.

.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%; 

      }

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.

 

VÍDEO DO YOUTUBE

<div class="video-wrapper">
  <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/ID_DO_YOUTUBE"></iframe>
</div>

VÍDEO DO VIMEO

<div class="video-wrapper">
  <iframe allowfullscreen="" frameborder="0" src="https://player.vimeo.com/video/ID_DO_VIMEO"></iframe>
</div>

NOTA:

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 dispositivos móveis, motivo porque no código não aparece a largura nem a altura do vídeo. Confira aqui, como ficará o player com apenas 1 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 inserir no player-galeria e que se encontra no 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 3 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.

 

<style>
  /* Estilize o player de vídeo */
  #videoPlayer {
    width: 100%;
    height: 500px;
  }

  /* Centralize os títulos dos vídeos */
  .videoTitle {
    text-align: center;
    cursor: pointer;
    color: blue;
    text-decoration: underline;
  }
</style>

<!-- Divs para os títulos dos vídeos -->
<div class="videoTitle" onclick="playVideo('https://www.youtube.com/watch?v=YJ9W2pZwvlY')">Título do vídeo 1 (YouTube)</div>
<div class="videoTitle" onclick="playVideo('https://vimeo.com/524933864')">Título do vídeo 2 (Vimeo)</div>
<div class="videoTitle" onclick="playVideo('https://www.youtube.com/watch?v=Eld7o9vZcnI')">Título do vídeo 3 (YouTube)</div>

<!-- Div para o player de vídeo -->
<div id="videoPlayer"></div>

<!-- Script para reproduzir o vídeo selecionado no player de vídeo -->
<script>
  function playVideo(videoUrl) {
    var player = document.getElementById('videoPlayer');
    
    if (videoUrl.includes('youtube.com')) {
      // Se o URL é do YouTube
      var videoId = videoUrl.split('v=')[1];
      player.innerHTML = '<iframe src="https://www.youtube.com/embed/' + videoId + '" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>';
    } else if (videoUrl.includes('vimeo.com')) {
      // Se o URL é do Vimeo
      var videoId = videoUrl.split('vimeo.com/')[1];
      player.innerHTML = '<iframe src="https://player.vimeo.com/video/' + videoId + '" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>';
    } else {
      player.innerHTML = 'URL de vídeo não suportado.';
    }
  }
 
  // Adicione o seguinte código para carregar o primeiro vídeo automaticamente
  window.addEventListener('DOMContentLoaded', function() {
    var firstVideoUrl = 'https://www.youtube.com/watch?v=YJ9W2pZwvlY'; // URL do primeiro vídeo
    playVideo(firstVideoUrl);
  });
</script>

---------------------

NOTA: Caso o primeiro vídeo a apresentar no player seja do Vimeo, esta parte final do código deverá ser alterada no que ao URL se refere, como o exemplo abaixo:

  // Adicione o seguinte código para carregar o primeiro vídeo automaticamente (agora é um URL do Vimeo)
  window.addEventListener('DOMContentLoaded', function() {
    var firstVideoUrl = 'https://vimeo.com/524933864'; // URL do primeiro vídeo do Vimeo
    playVideo(firstVideoUrl);
  });
</script>

6 – O presente código tem apenas 3 vídeos. Para acrescentarmos outro ou outros vídeos, só temos que incluir o respetivo código e ID do vídeo que pretendemos e, é claro, o nome do intérprete e título do vídeo. Assim:

YOUTUBE

<div class="videoTitle" onclick="playVideo('https://www.youtube.com/watch?v=YJ9W2pZwvlY')">Título do vídeo 1 (YouTube)</div>

 

VIMEO

<div class="videoTitle" onclick="playVideo('https://vimeo.com/524933864')">Título do vídeo 2 (Vimeo)</div>

 

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 dispositivos móveis.

Confira aqui, como ficará o player com os 3 (ou mais) títulos clicáveis por cima.

ETAPA 3

COLOCAÇÃO DE PLAYER COM UMA OU MAIS PLAYLIST NO POST OU PÁGINA

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 pequenas alterações de designação:

PLAYER COM UMA PLAYLIST

<div class="video-wrapper">

  <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/playlist?list=PLMG6-OLBIeMFPDD90OfGAedPgxprc2dFj&si=0mCmy0g6ZbEMBrLd"></iframe>

</div>

PLAYER COM DUAS OU MAIS PLAYLIST

    <style>
        /* Estilize o player de vídeo */
        #videoPlayer {
          width: 100%;
          height: 500px;
        }


        /* Centralize os títulos dos vídeos */
        .videoTitle {
          text-align: center;
        }
      </style>
    </head>
    <body>
      <!-- Divs para os títulos das playlists do YouTube -->
    <div class="videoTitle" onclick="playPlaylist('PLMG6-OLBIeMFPDD90OfGAedPgxprc2dFj')">Duetos Lusófonos</div>
    <div class="videoTitle" onclick="playPlaylist('PLMG6-OLBIeMF0Maopzw0Xzrp9Vrc8Jd2Z')">Pura Emoção</div>

      <!-- Div para o player de vídeo -->
      <div id="videoPlayer"></div>

      <!-- Script para reproduzir a playlist selecionada no player de vídeo -->
      <script>
        function playPlaylist(playlistId) {
          var player = document.getElementById('videoPlayer');
          player.innerHTML = '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/videoseries?list=' + playlistId + '" frameborder="0" allowfullscreen></iframe>';
        }

        // Adicione o seguinte código para carregar a primeira playlist automaticamente
        window.addEventListener('DOMContentLoaded', function() {
          var firstPlaylistId = 'PLMG6-OLBIeMFPDD90OfGAedPgxprc2dFj'; // ID da primeira playlist
          playPlaylist(firstPlaylistId);
        });
      </script>

----------------------

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

https://youtube.com/playlist?list=PLMG6-OLBIeMFPDD90OfGAedPgxprc2dFj&si=0mCmy0g6ZbEMBrLd

 

 Confira aqui, como ficará o player com várias playlists.

E chegamos ao fim deste tutorial, no qual inserimos, a título de demonstração, um player com um vídeo, e um player-galeria de vídeos, que com as devidas alterações poderá ser transformado num player-galeria de playlists.

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

POSTS RELACIONADOS:

📑 ÍNDICE DE ARTIGOS DOS AUTORES DO PORTAL

📑 ÍNDICE DAS PUBLICAÇÕES POR TEMAS