Logotipo Design Interativo
youtube channel

Obtendo último vídeo do Canal do Youtube no seu website


Precisei fazer esta implementação em um website, mas ler a documentação da API do Youtube foi um pouco cansativa, e foi difícil encontrar em fóruns alguma solução rápida e pratica para que o último vídeo de um canal do Youtube fosse apresentado no site, por este motivo quero deixar aqui um script em JQuery que utiliza a API e trás não apenas o último vídeo mas também quando você precisar.

São dois modelos no primeiro exibo o vídeo diretamente na página, e no outro apresento a capa da imagem do vídeo e ao clicar abre uma página com o vídeo.

Na versão 3 da API do Youtube é necessário gerar a chave de API, apiKey, com sua conta Google, basta acessar o link https://console.developers.google.com e seguir os passos para obter a chave.

Obtendo a APIKey do Youtube

1º Acesse https://console.developers.google.com

2º No menu lateral esquerdo clique em “Credenciais”

3º Clique no botão azul “Criar Credenciais” e escolha “Chave de API”

4º Renomeie do modo que preferir.

Também é necessário obter o Channel ID do canal que será exibido, basta seguir os passos abaixo

Obtendo o Channel ID do Youtube

1º Acesse sua conta no Youtube

2º Clique neste link www.youtube.com/account_advanced

3º A página exibe as configurações avançadas da sua conta com seu id channel.

Agora que você já tem sua chave e ID basta inserir no script:
var apiKey = ‘Sua apiKey’
var channelID = ‘Seu channelID';

Caso queira mudar a quantidade de vídeos que deseja exibir basta trocar na linha onde maxResults > 1 ? 1 : maxResults, pela quantidade a ser exibida, exemplo: maxResults > 1 ? 10 : maxResults, mostrando assim no caso do exemplo 10 últimos vídeos.

Pronto agora você já pode exibir sempre os últimos vídeos de seu canal no Youtube em seu site, mas uma dica é você de alguma forma esconder sua chave de api, mas para isso é necessário utilizar outra linguagem de programação para copilar o código.

Demonstração e Código

Vídeo direto na página


 

Capa com clique para o vídeo

Comentários
  1. Fernanda disse:

    No meu não funcionou :c
    Tem que adicionar alguma informação, além das que você mencionou?
    Não sei porque não funcionou, não aparece nada.

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade