Como colocar listas aleatórias do YouTube em um site

Escrito por kevin lee | Traduzido por andre trapani possignolo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como colocar listas aleatórias do YouTube em um site
Faça os visitantes do seu site curtirem músicas diferentes (Jupiterimages/Photos.com/Getty Images)

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.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

    Copie listas de reprodução

  1. 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. 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. 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. 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. 1

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

    <div id="1" class="hidden">

    </div>

    <div id="2" class="hidden">

    </div>

    <input type="button" value="Show Random Playlist" onclick="return showRandom('2')" />

    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. 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:

    <div id="1" class="hidden"> <iframe width="420" height="315" src="http://www.youtube.com/embed/JxZI0Cxaq20 <iframe> </div>

    <div id="2" class="hidden"> <iframe width="420" height="315" src="http://www.youtube.com/embed/s-c8X52Qg4o" > </iframe> </div>

  3. 3

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

    <div id="1" class="hidden">

    Isso criará uma classe "hidden" (escondida), à qual os divs fazem referência no passo anterior.

  4. 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. 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 & Advertências

  • 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.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível