Juke Box APP
×
const playlist = [
'VIDEO_ID_1',
'VIDEO_ID_2',
'VIDEO_ID_3',
'VIDEO_ID_4',
'VIDEO_ID_5',
'VIDEO_ID_6',
'VIDEO_ID_7',
'VIDEO_ID_8',
'VIDEO_ID_9'
];
let currentIndex = 0;
let player;
function toggleMoreVideos() {
const moreSection = document.getElementById('more-videos');
const button = document.getElementById('toggleButton');
if (moreSection.classList.contains('show')) {
moreSection.classList.remove('show');
button.textContent = 'Load More Videos';
setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 300);
} else {
moreSection.classList.add('show');
button.textContent = 'Show Less Videos';
setTimeout(() => moreSection.scrollIntoView({ behavior: 'smooth' }), 300);
}
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('lightboxFrame', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
nextVideo();
}
}
function openLightbox(index) {
currentIndex = index;
const lightbox = document.getElementById('lightbox');
const iframe = document.getElementById('lightboxFrame');
iframe.src = `https://www.youtube.com/embed/${playlist[index]}?autoplay=1&enablejsapi=1`;
lightbox.classList.add('active');
}
function closeLightbox(event) {
const lightbox = document.getElementById('lightbox');
const iframe = document.getElementById('lightboxFrame');
if (event.target === lightbox || event.target.classList.contains('lightbox-close')) {
lightbox.classList.remove('active');
iframe.src = '';
}
}
function nextVideo() {
currentIndex = (currentIndex + 1) % playlist.length;
openLightbox(currentIndex);
}
function prevVideo() {
currentIndex = (currentIndex - 1 + playlist.length) % playlist.length;
openLightbox(currentIndex);
}
// Load YouTube IFrame API
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.body.appendChild(tag);
-
Archives
- March 2026 (1)
- August 2025 (1)
- July 2025 (1)
- July 2022 (1)
- December 2018 (1)
- June 2016 (1)
- May 2016 (1)
- March 2016 (2)
- January 2016 (2)
- November 2015 (2)
- December 2014 (1)
- March 2014 (2)
-
Categories
-
RSS
Entries RSS
Comments RSS




