Retrieving A List Of YouTube Videos By Channel

This post will go over how to get a list of YouTube videos organized by channel. We can quickly retrieve the list of videos from a certain YouTube channel and show them on a website with their titles and thumbnails by utilizing the jQuery library in combination with the YouTube Data API.

For you to follow along with and use on your own website, this article includes a comprehensive example and code samples. This article will provide you with a thorough grasp of how to show a list of YouTube videos on your website, whether you’re a novice or an experienced web developer.

Here is an illustration of how to use JavaScript, CSS, and HTML to fetch a list of YouTube videos by channel title and links:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>YouTube Video List</title>
  <style>
    .video-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .video-card {
      width: 300px;
      margin: 10px;
      text-align: center;
      border: 1px solid lightgray;
      padding: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    }

    .video-thumbnail {
      width: 100%;
      height: 0;
      padding-bottom: 75%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .video-title {
      margin-top: 10px;
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <h1>YouTube Video List</h1>
  <div class="video-container">
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // Your JavaScript code goes here
  </script>
</body>
</html>

JavaScript:

$(document).ready(function() {
  // Your YouTube Channel ID
  var channelId = 'UCaWd5_7JhbQBe4dknZhsHJg';

  // Your YouTube API Key
  var apiKey = 'YOUR_API_KEY';

  // Get the list of videos from the channel
  $.get(
    'https://www.googleapis.com/youtube/v3/search', {
      part: 'snippet',
      channelId: channelId,
      maxResults: 20,
      type: 'video',
      key: apiKey
    },
    function(data) {
      var videos = data.items;
      console.log(videos);
      $.each(videos, function(index, video) {
        var videoId = video.id.videoId;
        var videoTitle = video.snippet.title;
        var videoThumbnail = video.snippet.thumbnails.medium.url;
        var videoLink = 'https://www.youtube.com/watch?v=' + videoId;
        $('.video-container').append(
          '<div class="video-card">' +
            '<div class="video-thumbnail" style="background-image: url(' + videoThumbnail + ');"></div>' +
            '<div class="video-title">' + videoTitle + '</div>' +
            '<a href="' + videoLink + '" target="_blank">Watch Video</a>' +
          '</div>'
        );
      });
    }
  );
});

Note: In the code above, you need to replace YOUR_API_KEY with your API Key. Find the step below to get the API key

Retrieving a List of YouTube Videos by Channel

Comments

Leave a Reply Cancel reply