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


youtube channel

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





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>