Mais
×

Como colocar listas aleatórias do YouTube em um site

Atualizado em 17 abril, 2017

Mesmo já tendo visto vídeos do YouTube embutidos em sites, você pode não saber que também é possível embutir listas de reprodução. Ao executar uma lista de reprodução no YouTube, ela reproduz todos os vídeos salvos. Você pode adicioná-la a um site colando o código gerado no YouTube em um documento HTML. Um modo interessante de não deixar a página monótona é colocar listas de reprodução aleatoriamente, assim seu site reproduzirá vídeos diferentes toda vez que o visitante carregar a página ou clicar em um botão.

Instruções

Faça os visitantes do seu site curtirem músicas diferentes (Jupiterimages/Photos.com/Getty Images)

    Copie listas de reprodução

  1. Acesse o YouTube e clique no seu nome de usuário que aparece no canto superior direito da página. Suas listas de reprodução aparecerão no topo da página.

  2. Clique em uma das listas de reprodução e o primeiro vídeo começará a tocar. Clique no botão "Share" (Compartilhar), abaixo do vídeo, e o botão "Embed" (Embutir) aparecerá.

  3. Clique no botão "Embed" e copie o texto da lista de reprodução da caixa que aparecerá abaixo dele. Abra o Bloco de Notas e cole o texto em um documento em branco.

  4. Clique em outra lista de reprodução e em um dos vídeos dela. Clique em "Share", depois em "Embed" e copie o texto que aparecer. Cole-o abaixo do que você colou anteriormente.

    Adicione ao site

  1. Abra um editor de texto ou um editor de HTML. Cole o seguinte código no corpo ("body") do documento:

    Isso criará dois blocos com div, cada uma armazenará uma lista de reprodução copiada do YouTube. Cada bloco reporta a uma classe CSS chamada "hidden" (escondido). Essa classe torna cada div invisível. Note que cada div possui um id numérico identificador único, sendo o do primeiro "1" e o do segundo "2". O comando "input" cria um botão que ao ser clicado ativa a função JavaScript "showRandom" e passa o número dessa função, que representa o número de listas de reprodução que você tem na página, no exemplo acima, "2". se tiver mais listas na página, mude o número na função.

  2. Copie a primeira lista de reprodução colada no Bolco de Notas na linha em branco que aparece no primeiro bloco div. Copie a segunda na do segundo. Após isso, o código deve parecer com isto:

  3. Cole o código mostrado abaixo na seção de estilo ("style") do documento:

  4. Cole o seguinte código de JavaScript na seção script do documento:

    function showRandom(numberOfPlaylists) { var divObject; for (var i = 1; i <= numberOfPlaylists; i++) { var divObject = document.getElementById(i); divObject.style.display = "none"; }

    var rand = Math.floor(Math.random() * numberOfPlaylists + 1); var divObject = document.getElementById(rand); divObject.style.display = "block"; }

    Isso gera um número aleatório com a variável "rand". Isso faz com que uma de suas listas de reprodução escondidas apareça, dependendo do valor da variável.

  5. Salve o documento, visualize-o em um navegador e clique no botão que aparece na página. Um player do YouTube contendo uma das suas listas aparecerá. Se clicar mais vezes, o código gerará um novo número aleatório e reproduzirá outras listas de reprodução, dependendo do valor gerado.

Dicas

  • Esse exemplo mostra como incluir duas listas de reprodução aleatoriamente em um site. Para adicionar mais uma, faça outro bloco div no corpo do documento, como mostrado nos passos, e cole o código de outra lista de reprodução do YouTube dentro dele. Por fim, mude o id do div e o do evento "button click" para "3". Esses números deve ser sempre iguais ao número de blocos div do documento HTML. Usando isso, você poderá adicionar quantas listas quiser no seu site.
  • Para reproduzir listas diferentes sempre que alguém visitar a página, coloque a função "showRandon" dentro do evento "onload" da página.
Cite this Article A tool to create a citation to reference this article Cite this Article