HTML code of Trending YouTube Video Checker
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Daily Trending YouTube Videos</title>
</head>
<body>
<h2>Daily Trending YouTube Videos</h2>
<p>Select a country to view trending videos:</p>
<select id=”country-select”>
<option value=”US”>United States</option>
<option value=”IN”>India</option>
<option value=”ID”>Indonesia</option>
<option value=”BR”>Brazil</option>
<option value=”NG”>Nigeria</option>
<option value=”PK”>Pakistan</option>
<option value=”BD”>Bangladesh</option>
<option value=”RU”>Russia</option>
<option value=”JP”>Japan</option>
<option value=”MX”>Mexico</option>
<option value=”PH”>Philippines</option>
<option value=”VN”>Vietnam</option>
<option value=”EG”>Egypt</option>
<option value=”ET”>Ethiopia</option>
<option value=”DE”>Germany</option>
<option value=”IR”>Iran</option>
<option value=”TR”>Turkey</option>
<option value=”CD”>Democratic Republic of the Congo</option>
<option value=”FR”>France</option>
<option value=”TH”>Thailand</option>
<option value=”GB”>United Kingdom</option>
<option value=”IT”>Italy</option>
<option value=”ZA”>South Africa</option>
<option value=”MM”>Myanmar</option>
<option value=”TZ”>Tanzania</option>
<option value=”KR”>South Korea</option>
<option value=”CO”>Colombia</option>
<option value=”KE”>Kenya</option>
<option value=”ES”>Spain</option>
<option value=”UG”>Uganda</option>
<option value=”AR”>Argentina</option>
<option value=”DZ”>Algeria</option>
<option value=”SD”>Sudan</option>
<option value=”UA”>Ukraine</option>
<option value=”IQ”>Iraq</option>
<option value=”PL”>Poland</option>
<option value=”CA”>Canada</option>
<option value=”MA”>Morocco</option>
<option value=”AF”>Afghanistan</option>
<option value=”SA”>Saudi Arabia</option>
<option value=”UZ”>Uzbekistan</option>
<option value=”PE”>Peru</option>
<option value=”AO”>Angola</option>
<option value=”MY”>Malaysia</option>
<option value=”MZ”>Mozambique</option>
<!– Add more options for other countries as needed –>
</select>
<button onclick=”fetchTrendingVideos()”>Fetch Trending Videos</button>
<div id=”videos-list”></div>
<script>
// Your YouTube Data API key
var apiKey = ‘AIzaSyCxAa48aOtoq2P2U58k4HYLmRJJPvJH5s0’;
// Function to fetch trending videos from YouTube Data API
function fetchTrendingVideos() {
var country = document.getElementById(‘country-select’).value;
var url = ‘https://www.googleapis.com/youtube/v3/videos’;
url += ‘?part=snippet’;
url += ‘&chart=mostPopular’;
url += ‘®ionCode=’ + country;
url += ‘&maxResults=50’; // You can adjust the number of videos to display
// Add your API key to the request URL
url += ‘&key=’ + apiKey;
// Fetch data from YouTube Data API
fetch(url)
.then(response => response.json())
.then(data => {
// Parse the response and display the videos
displayVideos(data.items);
})
.catch(error => console.error(‘Error fetching videos:’, error));
}
// Function to display trending videos on the webpage
function displayVideos(videos) {
var videosList = document.getElementById(‘videos-list’);
// Clear previous content
videosList.innerHTML = ”;
// Loop through the videos and create HTML elements to display them
videos.forEach(video => {
var videoTitle = video.snippet.title;
var videoId = video.id;
var videoThumbnail = video.snippet.thumbnails.default.url;
// Create HTML elements to display the video title, thumbnail, and link
var videoElement = document.createElement(‘div’);
videoElement.innerHTML = `
<h3>${videoTitle}</h3>
<a href=”https://www.youtube.com/watch?v=${videoId}” target=”_blank”>
<img src=”${videoThumbnail}” alt=”${videoTitle}”>
</a>
`;
// Append the video element to the videos list
videosList.appendChild(videoElement);
});
}
</script>
</body>
</html>