Demo App — Part 1

See how the YouTube Data API resources can be integrated into a real-world app.

We'll cover the following

We’ve looked at multiple resources that we can use to retrieve data from the API. It’s time to integrate them and use the data in a real-world app.

Workflow

We have our demo app in the code widget below. Let’s call it “YouTube Mini.” It demonstrates the workflow of searching a YouTube video. The app works as follows:

  1. After running the app, we’ll see the “Home” page. The “Home” page has a search bar, where we can enter a keyword or phrase. Next to the search bar, we’ll find the “Search” button. An API request will retrieve the search results associated with the keyword that we entered.
  2. Next, we’ll see the “Search results” page. Here, we’ll see the videos that we received as a response to the API request. You can play any video, make it fullscreen, change its settings as you would do on the YouTube website.
  3. Below every video, there is a “Channel Stats” button. When we click this button, an API request will retrieve the data of the channel on which the video was uploaded.
  4. After clicking the “Channel Stats” button, we’ll be redirected to the “Channel Stats” page. Here, we’ll see the channel name, channel ID, and statistics. The statistics include the video count, subscriber count, and the total number of videos posted on the channel.
    • On the same page, under the “More videos” section, we’ll also find other videos uploaded on the channel.

Resources and methods used

This app uses the following resources and methods from the API:

  • The search resource with the list method to retrieve the search results associated with a keyword.

  • The channel resource with the list method to retrieve the channel data of the YouTube channel associated with a video.

Run the app

Before running the app, please ensure that all the API keys are set up correctly in the widget below. If you haven’t done so already, add the API key that you generated for your project when you set up the credentials. Also, you can change the value of the MAX_RESULTS key to retrieve any number of results.

Now that everything is set up, let’s run the following code to experience the integration of YouTube Data API in a real-world app.

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <title>Video Search Bar using YouTube Data API</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container" style="margin-top: 25px; margin-bottom: 25px;">
      <div class="row">
        <a class="col-1" href="/searchResults/">Back</a>
        <h1 class="display-5 text-center col-10">YouTube Mini - Channel Stats</h1>
      </div>
      <br>
      {% for resource in data.channelData.items %}
        <figure class="text-center">
          <blockquote class="blockquote">
            <h4 style="color: red;" class="text-center">
              Channel Name:
              <small class="text-muted">{{resource.snippet.title}}</small>
            </h4>
          </blockquote>
          <figcaption class="blockquote-footer">
            Channel Id: <cite title="Source Title"><a target="_blank" style="text-decoration: underline; color: black;" href="https://youtube.com/channel/{{resource.id}}">{{resource.id}}</a></cite>
          </figcaption>
        </figure>
        <br>
        <h3 class="text-center"><u>Channel Statistics</u></h3>
        <br>
        <div class="row g-3">
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total views: </span>
              {{resource.statistics.viewCount}}
            </p>
          </div>
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total subscribers: </span>
              {{resource.statistics.subscriberCount}}
            </p>
          </div>
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total videos: </span>
              {{resource.statistics.videoCount}}
            </p>
          </div>
        </div>
        <br>
        <h3 class="text-center"><u>More Videos</u></h3>
        <br>
        <div class="container">
          <div class="row">
            {% for video in data.videosData.items %}
              <div class="col center-block text-center" style="margin-bottom: 15px;">
                <iframe class="video_display" width="400" height="300" src="https://www.youtube.com/embed/{{video.id.videoId}}" frameborder="5" allowfullscreen></iframe>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
      <br>
      <br>
    </div>
  </body>
</html>