· 2 years ago · Mar 03, 2023, 01:04 AM
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>My YouTube Channel</title>
5 </head>
6 <body>
7 <h1>My YouTube Channel</h1>
8 <div id="videos"></div>
9
10 <script src="https://apis.google.com/js/api.js"></script>
11 <script>
12 // Load the YouTube API client library
13 gapi.load('client', start);
14
15 function start() {
16 // Set the API key
17 gapi.client.setApiKey('YOUR_API_KEY');
18
19 // Make the API request to retrieve the channel's videos
20 gapi.client.request({
21 'path': 'youtube/v3/search',
22 'params': {
23 'part': 'snippet',
24 'channelId': 'UCCIx6vQdBfRgLqcMnxRYzew',
25 'maxResults': 10
26 }
27 }).then(function(response) {
28 var videos = response.result.items;
29
30 // Loop through the videos and create HTML elements to display them
31 for (var i = 0; i < videos.length; i++) {
32 var video = videos[i];
33 var title = video.snippet.title;
34 var thumbnail = video.snippet.thumbnails.default.url;
35 var videoId = video.id.videoId;
36
37 var div = document.createElement('div');
38 var img = document.createElement('img');
39 var a = document.createElement('a');
40
41 img.src = thumbnail;
42 a.href = 'https://www.youtube.com/watch?v=' + videoId;
43 a.target = '_blank';
44 a.innerText = title;
45
46 div.appendChild(img);
47 div.appendChild(a);
48 document.getElementById('videos').appendChild(div);
49 }
50 });
51 }
52 </script>
53 </body>
54</html>