YouTube Channel Videos
.video-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0px;
}
.video {
margin: 10px;
width: 300px;
text-align: center;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.video img {
width: 100%;
cursor: pointer;
border-radius: 8px;
}
.video-title {
font-size: 15px;
margin-top: -7px;
margin-bottom: 5px;
margin-left: 5px !IMPORTANT;
margin-right: 5px !important;
}
const API_KEY = 'AIzaSyB2sfZ1Aj6W1OlUiyBlpYj0zWQZzeppOJc'; // Replace with your YouTube API Key
const CHANNEL_ID = 'UCUmKtM4vECHNsOkGgRg5fEA'; // Replace with your YouTube Channel ID
const MAX_RESULTS = 6; // Number of videos to display
const videoContainer = document.getElementById('video-container');
async function fetchYouTubeVideos() {
try {
const response = await fetch(`https://www.googleapis.com/youtube/v3/search?key=${API_KEY}&channelId=${CHANNEL_ID}&part=snippet,id&order=date&maxResults=${MAX_RESULTS}`);
if (!response.ok) {
throw new Error('Failed to fetch videos from YouTube API.');
}
const data = await response.json();
displayVideos(data.items);
} catch (error) {
console.error('Error fetching YouTube videos:', error);
videoContainer.innerHTML = `
Failed to load videos. Please check the API key or Channel ID.
`;
}
}
function displayVideos(videos) {
videos.forEach(video => {
const videoId = video.id.videoId;
const thumbnailUrl = video.snippet.thumbnails.high.url;
const videoTitle = video.snippet.title;
const videoDiv = document.createElement('div');
videoDiv.classList.add('video');
videoDiv.innerHTML = `
${videoTitle}
`;
videoContainer.appendChild(videoDiv);
});
}
// Fetch videos on page load
fetchYouTubeVideos();
