Youtube Video Gallery in PHP and / or Javascript

1

I had a Youtube video gallery that appeared on the screen the last video of a channel, normal size and then appeared below 50 more videos in miniature, and when it was clicked on one of these thumbnails, the video was open in place of the one who had the largest size, until then all right!

But with the change from API v2 to v3, the videos are no longer appearing but a YouTube videos with a support message. I have already visited the support page but I could not resolve it.

Does anyone know how to solve this or have a code that addresses this situation?

    
asked by anonymous 15.05.2015 / 23:56

1 answer

0

I solved this situation in parts, I do not understand much of the subject, but I saw a video in English and I got a good profit on the subject.

First you go to: www.console.developers.google.com/project/507871535838/apiui/credential , log in and generate a Key to your browser applications, similar to this: AIzaSyAUdzBYnsoHcgeDqY9sflH0bv0XaIBjpsI you will use it in script.js

Then you download the file jquery-1.11.3.min.js and create 2 files: index.html and script.js

<ul id="results"></ul>

Now create index.html :

var channelName = 'Aqui vai o nome do canal';
var vidWidth = 250; //largura de cada vídeos
var vidHeight = 187; //altura de cada vídeos
var vidResults = 10; //qtd de vídeos que vai aparecer na galeria max 50

$(document).ready(function(){
$.get(
    "https://www.googleapis.com/youtube/v3/channels",{
        part: 'contentDetails',
        forUsername: channelName,
        key: 'AIzaSyAUdzBYnsoHcgeDqY9sflH0bv0XaIBjpsI'},//altere para sua chave
        function(data){
            $.each(data.items, function(i, item){
                console.log(item);
                pid = item.contentDetails.relatedPlaylists.uploads;
                getVids(pid);
            })
        }
);

function getVids(pid){
    $.get(
        "https://www.googleapis.com/youtube/v3/playlistItems",{
            part: 'snippet',
            maxResults: vidResults,
            playlistId: pid,
            key: 'AIzaSyAUdzBYnsoHcgeDqY9sflH0bv0XaIBjpsI'},//altere para sua chave
            function(data){
                var output;
                $.each(data.items, function(i, item){
                    console.log(item);
                    videTitle = item.snippet.title;
                    videoId = item.snippet.resourceId.videoId;
                    output = '<li><iframe width="'+vidWidth+'" height="'+vidHeight+'" src=\"https://www.youtube.com/embed/'+videoId+'\"></iframe></li>';
                    //Append to resultes listStyleType
                    $('#results').append(output);
                })
            }
    );    
}
});

I hope I have helped, as I said: I am a layman, but if anyone wants to improve, feel free.

    
04.06.2015 / 16:58