<div id=”redlist-container”>
<div id=”video-player”>
<iframe id=”main-player” width=”100%” height=”400″ src=”” frameborder=”0″ allowfullscreen></iframe>
</div>
<div id=”playlist-videos”></div>
</div>

<style>
#redlist-container {
display: flex;
flex-direction: колонка;
фоновий колір: #000;
колір: #fff;
відступ: 20 пікселів;
}

#video-player {
позиція: відносна;
margin-bottom: 20px;
}

#playlist-videos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
проміжок: 10px;
}

.video-item {
курсор: покажчик;
перехід: фон 0,3 с;
}

.video-item img {
ширина: 100%;
border-radius: 8px;
}

.video-item.active {
тло: rgba(255, 255, 255, 0.2);
}
</style>

<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const playlistId = “PLyg_LUNDEtC5rPRqY9NqdwkubSo9m_Ol-“; // ID твого плейлиста
const apiKey = “AIzaSyD323XS351oOCRGT0E5DW0a_qcz_0rx3e4”;
const mainPlayer = document.getElementById(‘main-player’);
const playlistContainer = document.getElementById(‘playlist-videos’);

асинхронна функція fetchPlaylist() {
const response = await fetch( https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playlistId}&key=${apiKey});
const data = очікування response.json();

if (data.items) {
const videos = data.items.map (item => ({
videoId: item.snippet.resourceId.videoId,
title: item.snippet.title,
мініатюра: item.snippet.thumbnails.medium.url
}));

renderPlaylist(відео);
setMainPlayer(відео[0].videoId);
}
}

функція renderPlaylist(videos) {
playlistContainer.innerHTML = ”;
videos.forEach((video, index) => {
const videoItem = document.createElement(‘div’);
videoItem.className = ‘video-item’;
videoItem.innerHTML = ; videoItem.addEventListener(‘click’, () => setMainPlayer(video.videoId, videoItem)); playlistContainer.appendChild(videoItem);
<img src="${video.thumbnail}" alt="${video.title}">
<div class="video-title">${video.title}</div>


if (index === 0) {
videoItem.classList.add(‘active’);
}
});
}

функція setMainPlayer(videoId, clickedItem = null) {
mainPlayer.src = https://www.youtube.com/embed/${videoId};
document.querySelectorAll(‘.video-item’).forEach(item => item.classList.remove(‘active’));
if (clickedItem) clickedItem.classList.add(‘active’);

// Автоматична зміна кольору під обране відео
const randomColor = #${Math.floor(Math.random() * 16777215).toString(16)};
document.getElementById(‘redlist-container’).style.backgroundColor = randomColor;
}

fetchPlaylist();
});
</script>