Tramite le API di YouTube è possibile integrare una playlist in una pagina html con una aspetto personalizzato.

Prima di utilizzare le API è necessario avere un account Google e creare un nuovo progetto per ottenere una chiave.

La chiave può essere ottenuta tramite la pagina Google APIs, prima cosa creare un nuovo progetto ed aasegnargli un nome
elenco progetti
elenco progetti
nuovo progetto
nuovo progetto

poi cercare l'API YouTube Data API v3
aggiungi API
aggiungi API
cerca API
cerca API
e abilitarla
abilita API
abilita API

infine creare le credenziali
aggiungi credenziali API
aggiungi credenziali API
selezionando YouTube Data API v3, Browser web (JavaScript), Dati pubblici e generare le credenziali cliccando sul pulsante Di quali credenziali hai bisogno?
aggiungi credenziali API
aggiungi credenziali API
copiare la stringa appena generata, andrà inserita nel codice JavaScript (gapi.client.setApiKey(...))
aggiungi credenziali API
aggiungi credenziali API
eventualmente si possono aggiungere altre restrizioni come ad esempio se limitare l'accesso solo alle chiamate che arrivano da un determinato HTTP referer.

Il codice html di esempio è questo:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Playlist YouTube - Sgart.it</title>
    <style>
        .play-list { display: block; list-style: none; margin: 0;padding: 0;  }
        .play-list li { display: flex; flex-direction: row; margin-bottom: 5px; background-color: #ddd; padding: 10px; }
        .play-list img, .play-list iframe { margin-right: 10px; }
    </style>
</head>
<body>
    <!-- palceholder dove verra inserita la playlist -->
    <div id="sgart-youtube-playlist">Loading play list ...</div>

    <!-- libreria API di Google -->
    <script src="https://apis.google.com/js/api.js"></script>
    <script>... inserire il codice javascript successivo...</script>
</body>
</html>
codice JavaScript

JavaScript

// inizializzo l'API
        gapi.load("client", function () {
            // imposto le credenziali per l'accesso all'api DA SOSTITUIRE CON UNO VALIDO
            gapi.client.setApiKey("AIzaSyA5k6R6PzPdBrnm5o-nZFfnOrPtDGARGvc");
            // carico la libreria
            return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
                .then(function () {
                    // libreria caricata
                    // adesso posso invocare le api che mi servono
                    invokeGapiClientApi();
                },
                    function (err) { console.error("Error loading GAPI client for API", err); });
        });

        // START: carico la playlist
        function invokeGapiClientApi() {
            // variabili di configurazione
            var palceholderId = "sgart-youtube-playlist";
            var playlistId = "PLeBOnJnVrSPVYe_1QqQKF5kcnDMxcNc6z";
            var maxResults = 3;
            var showPlayer = true;
            loadPlaylist(playlistId, maxResults, palceholderId, showPlayer);
        }

        function loadPlaylist(playlistId, maxResults, palceholderId, showPlayer) {
            return gapi.client.youtube.playlistItems.list({
                "part": "snippet,contentDetails",
                "maxResults": maxResults,
                "playlistId": playlistId
            })
                .then(function (response) {
                    if (showPlayer === true) {
                        // carico il player per ogni singolo elemento della play list
                        loadVideoPlayers(response.result.items, maxResults, palceholderId, 90);
                    } else {
                        // visualizzo solo le immagini di anteprima
                        addPlayList(response.result.items, palceholderId);
                    }
                },
                    function (err) { console.error("Execute error loadPlaylist", err); });
        }

        // visualizzo la playlist in pagina
        function addPlayList(items, palceholderId) {
            var s = "<ul class=\"play-list\">";
            items.forEach(function (item) {
                var snippet = item.snippet;
                var videoId = item.contentDetails.videoId;
                var title = snippet.title;
                var player = item.embedHtml || "<img src=\"" + snippet.thumbnails.default.url + "\" alt=\"" + title + "\">";
                s += "<li>"
                    + player
                    + "<div class=\"container\">"
                    + "<a href=\"https://www.youtube.com/watch?v=" + videoId + "\" target=\"_blank\">" + title + "</a>"
                    + "</div>"
                    + "</li>";

            });
            s += "</ul>";
            document.getElementById(palceholderId).innerHTML = s;
        }

        function loadVideoPlayers(items, maxResults, palceholderId, maxHeight) {
            var videoIds = "";
            // concateno gli id dei video di cui mi serve il player
            items.forEach(function (item) {
                videoIds += item.contentDetails.videoId + ",";
            });

            // faccio la chiamata per avere il codice del palyer
            return gapi.client.youtube.videos.list({
                "part": "player",
                "maxResults": maxResults,
                "maxHeight": maxHeight,
                "id": videoIds
            })
                .then(function (response) {
                    // per ogni elemento aggiuingo una nuov proprietà per il palyer
                    items.forEach(function (item) {
                        //cerco il video
                        var found = response.result.items.find(function (v) {
                            return item.contentDetails.videoId === v.id;
                        });
                        if (found) {
                            var s = found.player.embedHtml;
                            // se serve, cambio la larghezza e la imposto al 100%
                            //s = s.replace(/width="\d+\"/i, "width=\"100%\"");
                            item.embedHtml = s;
                        }
                    });
                    addPlayList(items, palceholderId)

                },
                    function (err) { console.error("Execute error", err); });
        }
Il codice, prima carica l'API (gapi.load), una volta caricata invoca la funzione per caricare la playlist (invokeGapiClientApi) che usa l'API gapi.client.youtube.playlistItems.list.

L'esempio può visualizzare o l'immagine di anteprima del video, oppure il player completo (vedi variabile showPlayer) in questo caso fa una seconda chiamata all'API gapi.client.youtube.videos.list.

L'ultima cosa da impostare è l'id della playlist (variabile playlistId) che può essere ricavato dalla querystring della pagina, parametro list:
playlist
playlist

Link utili: google-api-javascript-client e Code Samples
Tags:
HTML74 HTML 554 JavaScript184 JSON31
Potrebbe interessarti anche: