YouTube API – How to Get List of YouTube Videos of Your Channel

Recently one of our readers asked how to get a list of videos of a YouTube channel? They wanted to show a list of their videos in tabular format. In this article, we study how to use YouTube API to get a list of YouTube videos of your channel.

A user can see all their videos on the YouTube website itself. But if you want to share the video list with someone else then you have to keep this data offline. On the other hand, some users may want to display a video list on their website.

That being said, let’s have a look at how to get a list of YouTube videos using the YouTube API.

Note: Using the code of this article you can also get a list of videos of any YouTube channel providing a valid YouTube channel id.

Get Your API Key

To get started with the YouTube API, you first need to create an API key from your Google account. This key is necessary while interacting with the YouTube APIs. Without this key YouTube considers all incoming API requests as unauthorized.

Follow the steps below to create an API Key.

  • Go to the Google Developer Console https://console.developers.google.com.
  • Create a new project. You can select existing project also.
  • Type a name of your project. Google Console will create unique project ID.
  • After creating a project, it will appear on top of the left sidebar.
  • Click on Library. You will see list of Google APIs.
  • Enable YouTube Data API.
  • Click on the Credentials. Select API key under Create credentials.
  • Copy the API key. We will need it in a moment.

API Key

Get a List of YouTube Videos

Once you are ready with the API key, create 3 files in your project. These files stand for configuration and helper methods, Ajax handling, and display the final result.

  • config.php : In this file we set API key as a constant. It also has helper method which gives an API call and receives a response.
  • ajax.php : This file will call the API to get next set of results provided maximum results to return.
  • index.php : It contains a form, code for Ajax call, displays the video list.

In config.php file, let’s declare the API key as a constant variable. We also define the helper method which interacts with the API endpoints.

config.php

<?php
define('GOOGLE_API_KEY', 'PASTE_YOUR_API_KEY');

function getYTList($api_url = '') {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $api_url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    $arr_result = json_decode($response);
    if (isset($arr_result->items)) {
        return $arr_result;
    } elseif (isset($arr_result->error)) {
        //var_dump($arr_result); //this line gives you error info if you are not getting a video list.
    }
}

Make sure to replace the placeholder with the actual API key. You also need to have cURL extension enabled on your server.

Create a Form

Next, we need a simple form where we can enter the YouTube channel id and number of videos to return. YouTube API returns a maximum of 50 videos at a time.

index.php

<form method="get">
    <p><input type="text" name="channel" placeholder="Enter Channel ID" value="<?php if(array_key_exists('channel', $_GET)) echo $_GET['channel']; ?>" required></p>
    <p><input type="number" name="max_result" placeholder="Max Results" min="1" max="50" value="<?php if(array_key_exists('max_result', $_GET)) echo $_GET['max_result']; ?>" required></p>
    <p><input type="submit" value="Submit"></p>
</form>

Upon form submission, I am sending channel id and max_result by the GET method. So on the top of the same file, I will write the code as follows:

<?php
require_once "config.php";

$arr_list = array();
if (array_key_exists('channel', $_GET) && array_key_exists('max_result', $_GET)) {
    $channel = $_GET['channel'];
    $url = "https://www.googleapis.com/youtube/v3/search?channelId=$channel&order=date&part=snippet&type=video&maxResults=". $_GET['max_result'] ."&key=". GOOGLE_API_KEY;
    $arr_list = getYTList($url);
}
?>

This code includes a configuration file, get the parameters, build an API URL, and then pass it to the helper method we created in the previous step. To display the result add the below code after your form.

I am not going to focus on the design of a list. The main purpose of the tutorial is to fetch YouTube videos. I’ll display it in the list format.

<?php
if (!empty($arr_list)) {
    echo '<ul class="video-list">';
    foreach ($arr_list->items as $yt) {
        echo "<li>". $yt->snippet->title ." (". $yt->id->videoId .")</li>";
    }
    echo '</ul>';

    if (isset($arr_list->nextPageToken)) {
        echo '<input type="hidden" class="nextpagetoken" value="'. $arr_list->nextPageToken .'" />';
        echo '<div id="loadmore">Load More</div>';
    }
}
?>

Here we are looping through the videos and printing out the video title and video id. If we get the value of ‘nextPageToken’ we are adding a hidden field and Load More element. This is because if you have more than 50 videos on the channel, we can get the next set of records using this ‘nextPageToken’ value. After this, we need to give an Ajax call on the click of the Load More.

Ajax Call

When we click on Load More it will give a call to the ajax.php file. This file will give us the next set of records which will then append to the existing listing. Write the below JavaScript code at the end of the index.php file.

<script>
var httpRequest, nextPageToken;
document.getElementById("loadmore").addEventListener('click', makeRequest);
function makeRequest() {
    httpRequest = new XMLHttpRequest();
    nextPageToken = document.querySelector('.nextpagetoken').value;
    if (!httpRequest) {
        alert('Giving up : Cannot create an XMLHTTP instance');
        return false;
    }
    httpRequest.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200) {
            var list = JSON.parse(this.responseText);
            for(var i in list) {
                if(list[i].title != undefined && list[i].id != undefined) {
                    var newElement = document.createElement('li');
                    newElement.innerHTML = '<li>'+ list[i].title +'('+ list[i].id +')</li>';
                    document.querySelector('.video-list').appendChild(newElement);
                }
            }

            if(list[list.length-1].nextPageToken != undefined) {
                document.querySelector('.nextpagetoken').value = list[list.length-1].nextPageToken;
            } else {
                var loadmore = document.getElementById("loadmore");
                loadmore.parentNode.removeChild(loadmore);
            }
        }
    };
    httpRequest.open('GET', 'ajax.php?channel=<?php echo $_GET['channel']; ?>&max_result=<?php echo $_GET['max_result']; ?>&nextPageToken='+nextPageToken, true);
    httpRequest.send();
}
</script>

For this article, I am using vanilla JavaScript for ajax call and appending the response to the DOM. To the ajax file I am sending the values of channel id, max_result, and ‘nextPageToken’.

In the ajax file with the help of these parameters, we build the API URL. Upon receiving a response we will create a JSON object containing video information and send it back. To the final JSON, I am also appending a ‘nextPageToken’ value to get the next set of records on subsequent Ajax calls.

ajax.php

<?php
require_once "config.php";

$url = "https://www.googleapis.com/youtube/v3/search?channelId=". $_GET['channel'] ."&order=date&part=snippet&type=video&maxResults=". $_GET['max_result'] ."&pageToken=". $_GET['nextPageToken'] ."&key=". GOOGLE_API_KEY;

$arr_list = getYTList($url);

$arr_result = array();
if (!empty($arr_list)) {
    foreach ($arr_list->items as $yt) {
        array_push($arr_result, ['title' => $yt->snippet->title, 'id' => $yt->id->videoId]);
    }
    if (isset($arr_list->nextPageToken)) {
        array_push($arr_result, ['nextPageToken' => $arr_list->nextPageToken]);
    }
}

echo json_encode($arr_result);

Our JavaScript code receives this JSON response and appends the result to the existing list of YouTube videos. This process continues until we find the value for ‘nextPageToken’.

I hope you understand how to get a list of videos of a YouTube channel. Please share your thoughts or suggestions in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

3 thoughts on “YouTube API – How to Get List of YouTube Videos of Your Channel

Leave a Reply

Your email address will not be published. Required fields are marked *