document.addEventListener("DOMContentLoaded", function () {
const apiKey = 'AIzaSyBV6Dheu5p3LK_pAXResinInecoH2ESsLA'; // Replace with your API key
const playlistId = 'https://www.youtube.com/watch?v=XO90vIt6hAQ&list=PLnh8D5ohmJE5NnpHsbYpbTRgxfr6W3i1j&ab_channel=KenjiVods'; // Replace with your playlist ID
const gallery = document.getElementById("videoGallery");
const searchInput = document.getElementById("searchInput");
const videoModal = document.getElementById("videoModal");
const videoFrame = document.getElementById("videoFrame");
// Fetch videos from YouTube
fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${playlistId}&maxResults=50&key=${apiKey}`)
.then(response => response.json())
.then(data => {
const videos = data.items.map(item => ({
title: item.snippet.title,
thumbnail: item.snippet.thumbnails.medium.url,
videoId: item.snippet.resourceId.videoId
}));
renderGallery(videos);
// Search functionality
searchInput.addEventListener("input", function () {
const query = this.value.toLowerCase();
const filteredVideos = videos.filter(video => video.title.toLowerCase().includes(query));
renderGallery(filteredVideos);
});
});
// Render video gallery
function renderGallery(videos) {
gallery.innerHTML = "";
videos.forEach(video => {
const videoItem = document.createElement("div");
videoItem.style.textAlign = "center";
videoItem.innerHTML = `
${video.title}
`;
gallery.appendChild(videoItem);
});
}
// Open video modal
window.openModal = function (videoId) {
videoFrame.src = `https://www.youtube.com/embed/${videoId}?modestbranding=1&rel=0`;
videoModal.style.display = "flex";
};
// Close video modal
window.closeModal = function () {
videoFrame.src = "";
videoModal.style.display = "none";
};
});