Premium Video Player with Auto-Play<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css\"\/>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/particles.js@2.0.0\/particles.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@800;900&display=swap');\r\n \r\n :root {\r\n --primary: #6366f1;\r\n --secondary: #a855f7;\r\n --accent: #ec4899;\r\n --dark: #0f172a;\r\n --darker: #020617;\r\n }\r\n \r\n #particles-js {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n z-index: -1;\r\n opacity: 0.3;\r\n }\r\n \r\n .player-container {\r\n background: rgba(15, 23, 42, 0.7);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n }\r\n \r\n .video-wrapper {\r\n transform-style: preserve-3d;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n }\r\n \r\n .video-wrapper:hover {\r\n transform: translateY(-5px) rotateX(2deg);\r\n }\r\n \r\n #player {\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), \r\n 0 10px 10px -5px rgba(0, 0, 0, 0.2),\r\n inset 0 0 30px rgba(99, 102, 241, 0.3);\r\n border-radius: 16px;\r\n transform: translateZ(20px);\r\n width: 100%;\r\n height: 70vh;\r\n }\r\n \r\n .playlist-section {\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--primary) rgba(15, 23, 42, 0.5);\r\n }\r\n \r\n .playlist-section::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n .playlist-section::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.5);\r\n border-radius: 10px;\r\n }\r\n .playlist-section::-webkit-scrollbar-thumb {\r\n background: linear-gradient(to bottom, var(--primary), var(--secondary));\r\n border-radius: 10px;\r\n }\r\n .playlist-section::-webkit-scrollbar-thumb:hover {\r\n background: linear-gradient(to bottom, var(--primary), var(--accent));\r\n }\r\n \r\n .playlist-header {\r\n font-family: 'Montserrat', sans-serif;\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);\r\n }\r\n \r\n .playlist-item {\r\n background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(10px);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n transform-style: preserve-3d;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .playlist-item::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n z-index: -1;\r\n }\r\n \r\n .playlist-item:hover {\r\n transform: translateY(-3px) translateZ(10px);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .playlist-item:hover::before {\r\n opacity: 1;\r\n }\r\n \r\n .playlist-item.active {\r\n background: linear-gradient(145deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));\r\n border-color: rgba(236, 72, 153, 0.3);\r\n transform: translateX(10px) translateZ(20px);\r\n box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.3);\r\n }\r\n \r\n .playlist-item.active::before {\r\n opacity: 1;\r\n background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(236, 72, 153, 0.3) 100%);\r\n }\r\n \r\n .thumbnail-wrapper {\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n transform-style: preserve-3d;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .thumbnail-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(45deg, rgba(99, 102, 241, 0.3) 0%, rgba(236, 72, 153, 0.3) 100%);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .playlist-item:hover .thumbnail-wrapper::after {\r\n opacity: 0.5;\r\n }\r\n \r\n .play-icon {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%) scale(0.8);\r\n opacity: 0;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n color: white;\r\n background: rgba(0, 0, 0, 0.7);\r\n border-radius: 50%;\r\n width: 36px;\r\n height: 36px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 2;\r\n }\r\n \r\n .playlist-item:hover .play-icon {\r\n opacity: 1;\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n \r\n .active .play-icon {\r\n opacity: 1;\r\n transform: translate(-50%, -50%) scale(1);\r\n background: white;\r\n color: var(--primary);\r\n box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5);\r\n }\r\n \r\n .progress-container {\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(5px);\r\n }\r\n \r\n .progress-bar {\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);\r\n transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n .custom-controls {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.7), transparent) !important;\r\n padding: 20px;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n pointer-events: none;\r\n }\r\n \r\n .video-wrapper:hover .custom-controls {\r\n opacity: 1;\r\n z-index: 999;\r\n }\r\n \r\n .custom-controls > * {\r\n pointer-events: auto;\r\n }\r\n \r\n .timeline-container {\r\n width: 100%;\r\n height: 6px;\r\n background: rgba(255,255,255,0.2);\r\n border-radius: 3px;\r\n cursor: pointer;\r\n }\r\n \r\n .timeline {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n border-radius: 3px;\r\n width: 0%;\r\n position: relative;\r\n }\r\n \r\n .timeline::after {\r\n content: '';\r\n position: absolute;\r\n right: -6px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 12px;\r\n height: 12px;\r\n background: white;\r\n border-radius: 50%;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .timeline-container:hover .timeline::after {\r\n opacity: 1;\r\n }\r\n \r\n .controls-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .left-controls, .right-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n \r\n .control-btn {\r\n color: white;\r\n background: transparent;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 16px;\r\n transition: transform 0.2s ease;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n \r\n .control-btn:hover {\r\n transform: scale(1.1);\r\n color: var(--primary);\r\n }\r\n \r\n .volume-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n \r\n .volume-slider {\r\n width: 80px;\r\n height: 4px;\r\n -webkit-appearance: none;\r\n background: rgba(255,255,255,0.2);\r\n border-radius: 2px;\r\n outline: none;\r\n opacity: 0;\r\n transition: opacity 0.3s ease, width 0.3s ease;\r\n }\r\n \r\n .volume-container:hover .volume-slider {\r\n opacity: 1;\r\n }\r\n \r\n .volume-slider::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 12px;\r\n height: 12px;\r\n background: white;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n }\r\n \r\n .time-display {\r\n font-size: 14px;\r\n color: white;\r\n font-family: monospace;\r\n }\r\n \r\n .fullscreen-btn {\r\n margin-left: 10px;\r\n }\r\n \r\n .controls-container {\r\n background: rgba(15, 23, 42, 0.8);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .control-btn {\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n transform-style: preserve-3d;\r\n }\r\n \r\n .control-btn:hover {\r\n transform: translateY(-2px) scale(1.1) translateZ(10px);\r\n }\r\n \r\n .play-pause-btn {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3), \r\n 0 2px 4px -1px rgba(99, 102, 241, 0.2),\r\n inset 0 0 10px rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n .play-pause-btn:hover {\r\n background: linear-gradient(135deg, var(--secondary), var(--accent));\r\n box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3), \r\n inset 0 0 15px rgba(255, 255, 255, 0.3);\r\n }\r\n \r\n .now-playing-badge {\r\n background: linear-gradient(135deg, var(--primary), var(--accent));\r\n box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);\r\n animation: pulse 2s infinite;\r\n }\r\n \r\n @keyframes pulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }\r\n 70% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }\r\n }\r\n \r\n .time-display {\r\n text-shadow: 0 0 8px rgba(99, 102, 241, 0.5);\r\n }\r\n \r\n .ripple {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.4);\r\n transform: scale(0);\r\n animation: ripple 0.6s linear;\r\n pointer-events: none;\r\n }\r\n \r\n @keyframes ripple {\r\n to {\r\n transform: scale(4);\r\n opacity: 0;\r\n }\r\n }\r\n \r\n .video-change-animation {\r\n animation: videoChange 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;\r\n }\r\n \r\n @keyframes videoChange {\r\n 0% { transform: scale(1) translateZ(0); opacity: 1; }\r\n 50% { transform: scale(0.9) translateZ(-50px); opacity: 0.5; }\r\n 100% { transform: scale(1) translateZ(0); opacity: 1; }\r\n }\r\n \r\n .floating {\r\n animation: floating 8s ease-in-out infinite;\r\n }\r\n \r\n @keyframes floating {\r\n 0% { transform: translateY(0px) rotate(0deg); }\r\n 50% { transform: translateY(-20px) rotate(2deg); }\r\n 100% { transform: translateY(0px) rotate(0deg); }\r\n }\r\n \r\n .glow {\r\n filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.7));\r\n }\r\n \r\n .neon-text {\r\n text-shadow: 0 0 5px rgba(99, 102, 241, 0.8),\r\n 0 0 10px rgba(99, 102, 241, 0.6),\r\n 0 0 15px rgba(99, 102, 241, 0.4);\r\n }\r\n \r\n .click-to-play {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(0, 0, 0, 0.5);\r\n z-index: 10;\r\n cursor: pointer;\r\n opacity: 1;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .click-to-play.hidden {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n \r\n .click-to-play-content {\r\n background: rgba(15, 23, 42, 0.8);\r\n padding: 20px 30px;\r\n border-radius: 12px;\r\n text-align: center;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .loading-spinner {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n pointer-events: none;\r\n }\r\n \r\n .loading-spinner.active {\r\n opacity: 1;\r\n }\r\n \r\n .spinner {\r\n width: 48px;\r\n height: 48px;\r\n border: 5px solid rgba(99, 102, 241, 0.2);\r\n border-bottom-color: var(--primary);\r\n border-radius: 50%;\r\n display: inline-block;\r\n box-sizing: border-box;\r\n animation: rotation 1s linear infinite;\r\n }\r\n \r\n @keyframes rotation {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n \r\n .auto-play-toggle {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n z-index: 20;\r\n background: rgba(15, 23, 42, 0.8);\r\n border-radius: 20px;\r\n padding: 8px 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n cursor: pointer;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .auto-play-toggle span {\r\n font-size: 14px;\r\n color: white;\r\n }\r\n \r\n .auto-play-toggle .toggle {\r\n width: 40px;\r\n height: 20px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 10px;\r\n position: relative;\r\n transition: background 0.3s ease;\r\n }\r\n \r\n .auto-play-toggle .toggle::after {\r\n content: '';\r\n position: absolute;\r\n top: 2px;\r\n left: 2px;\r\n width: 16px;\r\n height: 16px;\r\n background: white;\r\n border-radius: 50%;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .auto-play-toggle.active .toggle {\r\n background: var(--primary);\r\n }\r\n \r\n .auto-play-toggle.active .toggle::after {\r\n transform: translateX(20px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"h-screen overflow-hidden flex items-center justify-center p-4 \">\r\n \r\n <div id=\"particles-js\"><\/div>\r\n \r\n \r\n <div class=\"absolute top-10 left-10 w-32 h-32 rounded-full bg-purple-600 opacity-10 blur-xl floating\"><\/div>\r\n <div class=\"absolute bottom-20 right-20 w-40 h-40 rounded-full bg-indigo-600 opacity-10 blur-xl floating\" style=\"animation-delay: 2s;\"><\/div>\r\n <div class=\"absolute top-1\/3 right-1\/4 w-24 h-24 rounded-full bg-pink-600 opacity-10 blur-xl floating\" style=\"animation-delay: 4s;\"><\/div>\r\n \r\n \r\n <div class=\"player-container w-full max-w-7xl h-[90vh] flex\">\r\n \r\n <div class=\"flex-1 p-8 flex justify-center items-center relative\">\r\n <div class=\"video-wrapper w-full h-full flex justify-center items-center\">\r\n <div id=\"player\" aria-label=\"Video player\"><\/div>\r\n \r\n \r\n <div class=\"loading-spinner\" id=\"loadingSpinner\">\r\n <span class=\"spinner\"><\/span>\r\n <\/div>\r\n \r\n \r\n <div class=\"click-to-play hidden\" id=\"clickToPlay\">\r\n <div class=\"click-to-play-content\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-16 w-16 mx-auto text-indigo-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Click to Play<\/h3>\r\n <p class=\"text-gray-300 text-sm\">Browser requires interaction to start playback<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"auto-play-toggle active\" id=\"autoPlayToggle\">\r\n <span>Auto-play<\/span>\r\n <div class=\"toggle\"><\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"custom-controls\">\r\n <div class=\"timeline-container\" id=\"timelineContainer\">\r\n <div class=\"timeline\" id=\"timeline\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"controls-row\">\r\n <div class=\"left-controls\">\r\n <button id=\"playPauseBtn\" class=\"control-btn play-pause-btn\" tabindex=\"0\" aria-label=\"Play video\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/button>\r\n \r\n <div class=\"volume-container\">\r\n <button id=\"muteBtn\" class=\"control-btn\" tabindex=\"0\" aria-label=\"Mute video\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.536 8.464a5 5 0 010 7.072M12 6a7.975 7.975 0 015.657 2.343m0 0a7.975 7.975 0 010 11.314m-11.314 0a7.975 7.975 0 010-11.314m0 0a7.975 7.975 0 015.657-2.343\" \/>\r\n <\/svg>\r\n <\/button>\r\n <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"1\" class=\"volume-slider\" id=\"volumeSlider\" aria-label=\"Volume control\">\r\n <\/div>\r\n \r\n <div class=\"time-display\">\r\n <span id=\"currentTime\">00:00<\/span> \/ <span id=\"duration\">00:00<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"right-controls\">\r\n <button id=\"fullscreenBtn\" class=\"control-btn fullscreen-btn\" tabindex=\"0\" aria-label=\"Enter fullscreen\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10\" \/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"w-96 border-l border-gray-800 flex flex-col\">\r\n <div class=\"p-6 border-b border-gray-800\">\r\n <h2 class=\"playlist-header text-3xl font-extrabold mb-2\">PLAYLIST<\/h2>\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"text-sm text-gray-400\">7 videos<\/div>\r\n <div class=\"flex items-center space-x-2 time-display\">\r\n <span id=\"currentTimeDisplay\" class=\"text-sm text-indigo-300\">00:00<\/span>\r\n <span class=\"text-gray-600\">\/<\/span>\r\n <span id=\"totalTimeDisplay\" class=\"text-sm text-indigo-300\">00:00<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"playlist\" class=\"flex-1 p-4 overflow-y-auto playlist-section space-y-4\">\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"dQw4w9WgXcQ\" \r\n data-title=\"Rick Astley - Never Gonna Give You Up\" \r\n data-description=\"Official video for Never Gonna Give You Up by Rick Astley\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/dQw4w9WgXcQ\/mqdefault.jpg\" alt=\"Video 1 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Never Gonna Give You Up<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:32<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"3tmd-ClpJxA\" \r\n data-title=\"The Weeknd - Blinding Lights\" \r\n data-description=\"Official music video for Blinding Lights by The Weeknd\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/3tmd-ClpJxA\/mqdefault.jpg\" alt=\"Video 2 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Blinding Lights<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:20<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"hLQl3W_Qo5U\" \r\n data-title=\"Adele - Hello\" \r\n data-description=\"Official music video for Hello by Adele\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/hLQl3W_Qo5U\/mqdefault.jpg\" alt=\"Video 3 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Hello<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">05:00<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"7wtfhZwyrcc\" \r\n data-title=\"Imagine Dragons - Believer\" \r\n data-description=\"Official music video for Believer by Imagine Dragons\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/7wtfhZwyrcc\/mqdefault.jpg\" alt=\"Video 4 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Believer<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:24<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"pRpeEdMmmQ0\" \r\n data-title=\"Shakira - Waka Waka\" \r\n data-description=\"Official music video for Waka Waka by Shakira\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/pRpeEdMmmQ0\/mqdefault.jpg\" alt=\"Video 5 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Waka Waka<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:22<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"y6120QOlsfU\" \r\n data-title=\"Darude - Sandstorm\" \r\n data-description=\"Official music video for Sandstorm by Darude\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/y6120QOlsfU\/mqdefault.jpg\" alt=\"Video 6 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Sandstorm<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:45<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative active\" \r\n data-video-id=\"XFkIdOO15po\" \r\n data-title=\"Ulster University Explained - Scholarships, Students, Courses\" \r\n data-description=\"Learn about Ulster University's scholarships, student life, and course offerings\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/XFkIdOO15po\/mqdefault.jpg\" alt=\"Ulster University Video Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Ulster University Explained<\/span>\r\n <span class=\"now-playing-badge text-xs text-white px-2 py-1 rounded-full ml-2 text-xs\">NOW PLAYING<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:45<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-red-600\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize particles.js\r\n particlesJS(\"particles-js\", {\r\n \"particles\": {\r\n \"number\": { \"value\": 80, \"density\": { \"enable\": true, \"value_area\": 800 } },\r\n \"color\": { \"value\": \"#6366f1\" },\r\n \"shape\": { \"type\": \"circle\", \"stroke\": { \"width\": 0, \"color\": \"#000000\" }, \"polygon\": { \"nb_sides\": 5 } },\r\n \"opacity\": { \"value\": 0.5, \"random\": true, \"anim\": { \"enable\": false } },\r\n \"size\": { \"value\": 3, \"random\": true, \"anim\": { \"enable\": false } },\r\n \"line_linked\": { \"enable\": true, \"distance\": 150, \"color\": \"#6366f1\", \"opacity\": 0.2, \"width\": 1 },\r\n \"move\": { \"enable\": true, \"speed\": 2, \"direction\": \"none\", \"random\": true, \"straight\": false, \"out_mode\": \"out\", \"bounce\": false }\r\n },\r\n \"interactivity\": {\r\n \"detect_on\": \"canvas\",\r\n \"events\": { \"onhover\": { \"enable\": true, \"mode\": \"grab\" }, \"onclick\": { \"enable\": true, \"mode\": \"push\" }, \"resize\": true },\r\n \"modes\": { \"grab\": { \"distance\": 140, \"line_linked\": { \"opacity\": 0.5 } }, \"push\": { \"particles_nb\": 4 } }\r\n },\r\n \"retina_detect\": true\r\n });\r\n\r\n \/\/ YouTube API setup\r\n let player;\r\n let playerReady = false;\r\n let autoPlayEnabled = true;\r\n const playlistItems = document.querySelectorAll('.playlist-item');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const muteBtn = document.getElementById('muteBtn');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n const timeline = document.getElementById('timeline');\r\n const timelineContainer = document.getElementById('timelineContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const fullscreenBtn = document.getElementById('fullscreenBtn');\r\n const currentTimeDisplay = document.getElementById('currentTimeDisplay');\r\n const totalTimeDisplay = document.getElementById('totalTimeDisplay');\r\n const clickToPlay = document.getElementById('clickToPlay');\r\n const loadingSpinner = document.getElementById('loadingSpinner');\r\n const autoPlayToggle = document.getElementById('autoPlayToggle');\r\n const videoTitleEl = document.createElement('h2');\r\n const videoDescriptionEl = document.createElement('p');\r\n\r\n \/\/ Add video info elements to the DOM\r\n const playerInfoContainer = document.querySelector('.video-wrapper');\r\n videoTitleEl.className = 'absolute top-4 left-4 text-xl font-semibold text-white neon-text';\r\n videoDescriptionEl.className = 'absolute top-16 left-4 text-sm text-gray-300 max-w-lg';\r\n playerInfoContainer.appendChild(videoTitleEl);\r\n playerInfoContainer.appendChild(videoDescriptionEl);\r\n\r\n \/\/ Format duration in mm:ss\r\n function formatDuration(seconds) {\r\n if (isNaN(seconds)) return '00:00';\r\n const minutes = Math.floor(seconds \/ 60);\r\n const secs = Math.floor(seconds % 60);\r\n return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\r\n }\r\n\r\n \/\/ Create ripple effect\r\n function createRipple(event) {\r\n const button = event.currentTarget;\r\n const rect = button.getBoundingClientRect();\r\n const x = event.clientX - rect.left;\r\n const y = event.clientY - rect.top;\r\n\r\n const ripple = document.createElement('span');\r\n ripple.classList.add('ripple');\r\n ripple.style.left = `${x}px`;\r\n ripple.style.top = `${y}px`;\r\n\r\n button.appendChild(ripple);\r\n\r\n setTimeout(() => ripple.remove(), 600);\r\n }\r\n\r\n \/\/ Load YouTube API if not already loaded\r\n function loadYouTubeAPI() {\r\n if (window.YT && window.YT.Player) {\r\n initializePlayer();\r\n } else {\r\n const tag = document.createElement('script');\r\n tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\r\n const firstScriptTag = document.getElementsByTagName('script')[0];\r\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n \r\n \/\/ Set up callback for when API is ready\r\n window.onYouTubeIframeAPIReady = initializePlayer;\r\n }\r\n }\r\n\r\n \/\/ Initialize YouTube player\r\n function initializePlayer() {\r\n try {\r\n player = new YT.Player('player', {\r\n height: '100%',\r\n width: '100%',\r\n videoId: 'XFkIdOO15po',\r\n playerVars: {\r\n 'playsinline': 1,\r\n 'controls': 0,\r\n 'showinfo': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1,\r\n 'enablejsapi': 1,\r\n 'autoplay': 0\r\n },\r\n events: {\r\n 'onReady': onPlayerReady,\r\n 'onStateChange': onPlayerStateChange,\r\n 'onError': onPlayerError\r\n }\r\n });\r\n } catch (e) {\r\n console.error(\"YouTube Player initialization failed:\", e);\r\n clickToPlay.querySelector('h3').textContent = 'Player Error';\r\n clickToPlay.querySelector('p').textContent = 'Failed to initialize player. Please refresh the page.';\r\n clickToPlay.classList.remove('hidden');\r\n }\r\n }\r\n\r\n function onPlayerReady(event) {\r\n playerReady = true;\r\n playPauseBtn.disabled = false;\r\n updateVolume();\r\n loadVideoDurations();\r\n updateVideoInfo();\r\n \r\n updatePlayButtonState();\r\n \r\n \/\/ Set up user interaction requirements\r\n document.addEventListener('click', initPlayback, { once: true });\r\n document.addEventListener('touchstart', initPlayback, { once: true });\r\n document.addEventListener('keydown', initPlayback, { once: true });\r\n }\r\n\r\n function initPlayback() {\r\n if (!playerReady) return;\r\n \r\n \/\/ First try normal playback\r\n player.playVideo().then(() => {\r\n clickToPlay.classList.add('hidden');\r\n }).catch(error => {\r\n console.log(\"Autoplay blocked, trying muted playback:\", error);\r\n \/\/ If normal playback fails, try muted playback\r\n player.mute();\r\n player.playVideo().then(() => {\r\n clickToPlay.classList.add('hidden');\r\n }).catch(muteError => {\r\n console.log(\"Muted playback also blocked:\", muteError);\r\n clickToPlay.querySelector('p').textContent = 'Click to play video';\r\n clickToPlay.classList.remove('hidden');\r\n });\r\n });\r\n }\r\n\r\n function updatePlayButtonState() {\r\n const playerState = player.getPlayerState();\r\n if (playerState === YT.PlayerState.PLAYING) {\r\n playPauseBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\r\n <\/svg>\r\n `;\r\n playPauseBtn.setAttribute('aria-label', 'Pause video');\r\n clickToPlay.classList.add('hidden');\r\n } else {\r\n playPauseBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n `;\r\n playPauseBtn.setAttribute('aria-label', 'Play video');\r\n }\r\n }\r\n\r\n function onPlayerStateChange(event) {\r\n updatePlayButtonState();\r\n \r\n if (event.data === YT.PlayerState.PLAYING) {\r\n clickToPlay.classList.add('hidden');\r\n updateTime();\r\n startTimeUpdate();\r\n loadingSpinner.classList.remove('active');\r\n } else if (event.data === YT.PlayerState.ENDED) {\r\n \/\/ When video ends, play next one if autoplay is enabled\r\n if (autoPlayEnabled) {\r\n playNextVideo();\r\n }\r\n } else if (event.data === YT.PlayerState.BUFFERING) {\r\n loadingSpinner.classList.add('active');\r\n } else {\r\n loadingSpinner.classList.remove('active');\r\n }\r\n }\r\n\r\n function onPlayerError(event) {\r\n console.error('YouTube player error:', event.data);\r\n loadingSpinner.classList.remove('active');\r\n \r\n const errorMessages = {\r\n 2: 'Invalid video parameters. Please try another video.',\r\n 5: 'This video cannot be played in the embedded player.',\r\n 100: 'Video not found or removed.',\r\n 101: 'Embedding disabled by video owner.',\r\n 150: 'Embedding disabled by video owner.'\r\n };\r\n \r\n const message = errorMessages[event.data] || 'Video playback failed. Please try another video.';\r\n \r\n clickToPlay.querySelector('h3').textContent = 'Playback Error';\r\n clickToPlay.querySelector('p').textContent = message;\r\n clickToPlay.classList.remove('hidden');\r\n \r\n const activeItem = document.querySelector('.playlist-item.active');\r\n if (activeItem) {\r\n activeItem.querySelector('.duration').textContent = 'Error';\r\n \/\/ If autoplay is enabled, try next video after error\r\n if (autoPlayEnabled) {\r\n setTimeout(playNextVideo, 2000);\r\n }\r\n }\r\n }\r\n\r\n function updateVideoInfo() {\r\n const activeItem = document.querySelector('.playlist-item.active');\r\n if (activeItem) {\r\n videoTitleEl.textContent = activeItem.dataset.title;\r\n videoDescriptionEl.textContent = activeItem.dataset.description;\r\n }\r\n }\r\n\r\n let timeUpdateInterval;\r\n function startTimeUpdate() {\r\n clearInterval(timeUpdateInterval);\r\n timeUpdateInterval = setInterval(updateTime, 1000);\r\n }\r\n\r\n function updateTime() {\r\n if (!player || !player.getCurrentTime) return;\r\n const currentTime = player.getCurrentTime();\r\n const duration = player.getDuration();\r\n\r\n if (!isNaN(duration)) {\r\n const percent = (currentTime \/ duration) * 100;\r\n timeline.style.width = `${percent}%`;\r\n\r\n currentTimeEl.textContent = formatDuration(currentTime);\r\n durationEl.textContent = formatDuration(duration);\r\n currentTimeDisplay.textContent = formatDuration(currentTime);\r\n totalTimeDisplay.textContent = formatDuration(duration);\r\n\r\n const activeItem = document.querySelector('.playlist-item.active');\r\n if (activeItem) {\r\n activeItem.querySelector('.progress-bar').style.width = `${percent}%`;\r\n }\r\n }\r\n }\r\n\r\n function playPreviousVideo() {\r\n const activeItem = document.querySelector('.playlist-item.active');\r\n const prevItem = activeItem.previousElementSibling || playlistItems[playlistItems.length - 1];\r\n if (prevItem) playVideo(prevItem);\r\n }\r\n\r\n function playNextVideo() {\r\n const activeItem = document.querySelector('.playlist-item.active');\r\n const nextItem = activeItem.nextElementSibling || playlistItems[0];\r\n if (nextItem) playVideo(nextItem);\r\n }\r\n\r\n function togglePlayPause(e) {\r\n if (e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n if (!playerReady) return;\r\n\r\n const playerState = player.getPlayerState();\r\n \r\n if (playerState === YT.PlayerState.PLAYING) {\r\n player.pauseVideo();\r\n } else {\r\n player.playVideo().catch(error => {\r\n console.error('Playback failed:', error);\r\n player.mute();\r\n player.playVideo().catch(muteError => {\r\n console.error('Muted playback failed:', muteError);\r\n clickToPlay.querySelector('p').textContent = 'Please click to play the video.';\r\n clickToPlay.classList.remove('hidden');\r\n });\r\n });\r\n }\r\n }\r\n\r\n function toggleMute() {\r\n if (player.isMuted()) {\r\n player.unMute();\r\n volumeSlider.value = player.getVolume() \/ 100;\r\n muteBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.536 8.464a5 5 0 010 7.072M12 6a7.975 7.975 0 015.657 2.343m0 0a7.975 7.975 0 010 11.314m-11.314 0a7.975 7.975 0 010-11.314m0 0a7.975 7.975 0 015.657-2.343\" \/>\r\n <\/svg>\r\n `;\r\n muteBtn.setAttribute('aria-label', 'Mute video');\r\n } else {\r\n player.mute();\r\n volumeSlider.value = 0;\r\n muteBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z\" clip-rule=\"evenodd\" \/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2\" \/>\r\n <\/svg>\r\n `;\r\n muteBtn.setAttribute('aria-label', 'Unmute video');\r\n }\r\n }\r\n\r\n function updateVolume() {\r\n if (!player) return;\r\n player.setVolume(volumeSlider.value * 100);\r\n if (volumeSlider.value == 0) {\r\n player.mute();\r\n muteBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z\" clip-rule=\"evenodd\" \/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2\" \/>\r\n <\/svg>\r\n `;\r\n muteBtn.setAttribute('aria-label', 'Unmute video');\r\n } else {\r\n player.unMute();\r\n muteBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.536 8.464a5 5 0 010 7.072M12 6a7.975 7.975 0 015.657 2.343m0 0a7.975 7.975 0 010 11.314m-11.314 0a7.975 7.975 0 010-11.314m0 0a7.975 7.975 0 015.657-2.343\" \/>\r\n <\/svg>\r\n `;\r\n muteBtn.setAttribute('aria-label', 'Mute video');\r\n }\r\n }\r\n\r\n function seekVideo(e) {\r\n if (!player) return;\r\n const rect = timelineContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n player.seekTo(pos * player.getDuration(), true);\r\n }\r\n\r\n function toggleFullscreen() {\r\n if (!document.fullscreenElement) {\r\n document.querySelector('.player-container').requestFullscreen().catch(err => {\r\n console.error(`Error enabling fullscreen: ${err.message}`);\r\n });\r\n fullscreenBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/>\r\n <\/svg>\r\n `;\r\n fullscreenBtn.setAttribute('aria-label', 'Exit fullscreen');\r\n } else {\r\n document.exitFullscreen();\r\n fullscreenBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10\" \/>\r\n <\/svg>\r\n `;\r\n fullscreenBtn.setAttribute('aria-label', 'Enter fullscreen');\r\n }\r\n }\r\n\r\n function playVideo(item) {\r\n if (!playerReady) return;\r\n \r\n loadingSpinner.classList.add('active');\r\n const videoWrapper = document.querySelector('.video-wrapper');\r\n videoWrapper.classList.add('video-change-animation');\r\n \r\n playlistItems.forEach(i => {\r\n i.classList.remove('active');\r\n i.querySelector('.progress-bar').style.width = '0%';\r\n const badge = i.querySelector('.now-playing-badge');\r\n if (badge) badge.remove();\r\n });\r\n\r\n item.classList.add('active');\r\n\r\n const titleContainer = item.querySelector('.font-semibold').parentNode;\r\n const badge = document.createElement('span');\r\n badge.className = 'now-playing-badge text-xs text-white px-2 py-1 rounded-full ml-2 text-xs';\r\n badge.textContent = 'NOW PLAYING';\r\n titleContainer.appendChild(badge);\r\n\r\n const videoId = item.getAttribute('data-video-id');\r\n \r\n try {\r\n player.loadVideoById(videoId).then(() => {\r\n setTimeout(() => {\r\n videoWrapper.classList.remove('video-change-animation');\r\n loadingSpinner.classList.remove('active');\r\n \r\n \/\/ Try to play after load if autoplay is enabled\r\n if (autoPlayEnabled) {\r\n player.playVideo().catch(playError => {\r\n console.log(\"Playback after load failed:\", playError);\r\n clickToPlay.classList.remove('hidden');\r\n });\r\n } else {\r\n \/\/ If autoplay is disabled, just show the play button\r\n updatePlayButtonState();\r\n }\r\n }, 800);\r\n }).catch(loadError => {\r\n console.error(\"Error loading video:\", loadError);\r\n loadingSpinner.classList.remove('active');\r\n onPlayerError({data: 2});\r\n });\r\n } catch (e) {\r\n console.error(\"Video load exception:\", e);\r\n loadingSpinner.classList.remove('active');\r\n onPlayerError({data: 2});\r\n }\r\n \r\n item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n updateVideoInfo();\r\n }\r\n\r\n function loadVideoDurations() {\r\n playlistItems.forEach(item => {\r\n const videoId = item.getAttribute('data-video-id');\r\n const durationElement = item.querySelector('.duration');\r\n\r\n const demoDurations = {\r\n 'dQw4w9WgXcQ': '03:32',\r\n '3tmd-ClpJxA': '03:20',\r\n 'hLQl3W_Qo5U': '05:00',\r\n '7wtfhZwyrcc': '03:24',\r\n 'pRpeEdMmmQ0': '03:22',\r\n 'y6120QOlsfU': '03:45',\r\n 'XFkIdOO15po': '03:45'\r\n };\r\n\r\n if (demoDurations[videoId]) {\r\n durationElement.textContent = demoDurations[videoId];\r\n } else {\r\n durationElement.textContent = 'Unknown';\r\n }\r\n });\r\n }\r\n\r\n function toggleAutoPlay() {\r\n autoPlayEnabled = !autoPlayEnabled;\r\n autoPlayToggle.classList.toggle('active', autoPlayEnabled);\r\n \r\n \/\/ If enabling autoplay and player is paused, try to play\r\n if (autoPlayEnabled && player.getPlayerState() === YT.PlayerState.PAUSED) {\r\n player.playVideo().catch(error => {\r\n console.log(\"Autoplay blocked:\", error);\r\n });\r\n }\r\n }\r\n\r\n \/\/ Initialize playlist interactions\r\n playlistItems.forEach(item => {\r\n item.addEventListener('click', e => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n playVideo(item);\r\n });\r\n\r\n item.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n playVideo(item);\r\n }\r\n });\r\n });\r\n\r\n \/\/ Event listeners for controls\r\n playPauseBtn.addEventListener('click', togglePlayPause);\r\n playPauseBtn.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n togglePlayPause(e);\r\n }\r\n });\r\n\r\n muteBtn.addEventListener('click', e => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n toggleMute();\r\n });\r\n\r\n muteBtn.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n toggleMute();\r\n }\r\n });\r\n\r\n volumeSlider.addEventListener('input', updateVolume);\r\n\r\n timelineContainer.addEventListener('click', seekVideo);\r\n\r\n fullscreenBtn.addEventListener('click', e => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n toggleFullscreen();\r\n });\r\n\r\n fullscreenBtn.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n toggleFullscreen();\r\n }\r\n });\r\n\r\n autoPlayToggle.addEventListener('click', toggleAutoPlay);\r\n\r\n \/\/ Keyboard shortcuts\r\n document.addEventListener('keydown', e => {\r\n if (e.target.tagName === 'INPUT') return;\r\n if (e.code === 'Space') {\r\n e.preventDefault();\r\n togglePlayPause(e);\r\n } else if (e.code === 'ArrowRight') {\r\n if (player) player.seekTo(player.getCurrentTime() + 5, true);\r\n } else if (e.code === 'ArrowLeft') {\r\n if (player) player.seekTo(player.getCurrentTime() - 5, true);\r\n } else if (e.code === 'ArrowUp') {\r\n playPreviousVideo();\r\n } else if (e.code === 'ArrowDown') {\r\n playNextVideo();\r\n } else if (e.code === 'KeyM') {\r\n toggleMute();\r\n } else if (e.code === 'KeyF') {\r\n toggleFullscreen();\r\n } else if (e.code === 'KeyA') {\r\n toggleAutoPlay();\r\n }\r\n });\r\n\r\n \/\/ Disable play\/pause button until player is ready\r\n playPauseBtn.disabled = true;\r\n\r\n \/\/ Start loading the YouTube API\r\n loadYouTubeAPI();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"two_page_speed":[],"footnotes":""},"class_list":["post-5440","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Podcast - Paragon Education<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/paragoneducation.sa\/ar\/podcast\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Podcast - Paragon Education\" \/>\n<meta property=\"og:url\" content=\"https:\/\/paragoneducation.sa\/ar\/podcast\/\" \/>\n<meta property=\"og:site_name\" content=\"Paragon Education\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/paragoneducation.sa\/podcast\/\",\"url\":\"https:\/\/paragoneducation.sa\/podcast\/\",\"name\":\"Podcast - Paragon Education\",\"isPartOf\":{\"@id\":\"https:\/\/paragoneducation.sa\/#website\"},\"datePublished\":\"2025-07-26T13:47:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/paragoneducation.sa\/podcast\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/paragoneducation.sa\/podcast\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/paragoneducation.sa\/podcast\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/paragoneducation.sa\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Podcast\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/paragoneducation.sa\/#website\",\"url\":\"https:\/\/paragoneducation.sa\/\",\"name\":\"Paragon Education\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/paragoneducation.sa\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/paragoneducation.sa\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/paragoneducation.sa\/#organization\",\"name\":\"Paragon Education\",\"url\":\"https:\/\/paragoneducation.sa\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/paragoneducation.sa\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/paragoneducation.sa\/wp-content\/uploads\/2025\/05\/download-1-1.png\",\"contentUrl\":\"https:\/\/paragoneducation.sa\/wp-content\/uploads\/2025\/05\/download-1-1.png\",\"width\":1024,\"height\":683,\"caption\":\"Paragon Education\"},\"image\":{\"@id\":\"https:\/\/paragoneducation.sa\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Podcast - Paragon Education","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/paragoneducation.sa\/ar\/podcast\/","og_locale":"ar_AR","og_type":"article","og_title":"Podcast - Paragon Education","og_url":"https:\/\/paragoneducation.sa\/ar\/podcast\/","og_site_name":"Paragon Education","twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/paragoneducation.sa\/podcast\/","url":"https:\/\/paragoneducation.sa\/podcast\/","name":"Podcast - Paragon Education","isPartOf":{"@id":"https:\/\/paragoneducation.sa\/#website"},"datePublished":"2025-07-26T13:47:02+00:00","breadcrumb":{"@id":"https:\/\/paragoneducation.sa\/podcast\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/paragoneducation.sa\/podcast\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/paragoneducation.sa\/podcast\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/paragoneducation.sa\/"},{"@type":"ListItem","position":2,"name":"Podcast"}]},{"@type":"WebSite","@id":"https:\/\/paragoneducation.sa\/#website","url":"https:\/\/paragoneducation.sa\/","name":"Paragon Education","description":"","publisher":{"@id":"https:\/\/paragoneducation.sa\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/paragoneducation.sa\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/paragoneducation.sa\/#organization","name":"Paragon Education","url":"https:\/\/paragoneducation.sa\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/paragoneducation.sa\/#\/schema\/logo\/image\/","url":"https:\/\/paragoneducation.sa\/wp-content\/uploads\/2025\/05\/download-1-1.png","contentUrl":"https:\/\/paragoneducation.sa\/wp-content\/uploads\/2025\/05\/download-1-1.png","width":1024,"height":683,"caption":"Paragon Education"},"image":{"@id":"https:\/\/paragoneducation.sa\/#\/schema\/logo\/image\/"}}]}},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"techbuzzpk@gmail.com","author_link":"https:\/\/paragoneducation.sa\/ar\/author\/techbuzzpkgmail-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/pages\/5440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/comments?post=5440"}],"version-history":[{"count":1,"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/pages\/5440\/revisions"}],"predecessor-version":[{"id":5441,"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/pages\/5440\/revisions\/5441"}],"wp:attachment":[{"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/media?parent=5440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5440,"date":"2025-07-26T13:47:02","date_gmt":"2025-07-26T13:47:02","guid":{"rendered":"https:\/\/paragoneducation.sa\/?page_id=5440"},"modified":"2025-07-26T13:47:02","modified_gmt":"2025-07-26T13:47:02","slug":"podcast","status":"publish","type":"page","link":"https:\/\/paragoneducation.sa\/ar\/podcast\/","title":{"rendered":"Podcast"},"content":{"rendered":"\r\n\r\n\r\n \r\n \r\n Premium Video Player with Auto-Play<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css\"\/>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/particles.js@2.0.0\/particles.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@800;900&display=swap');\r\n \r\n :root {\r\n --primary: #6366f1;\r\n --secondary: #a855f7;\r\n --accent: #ec4899;\r\n --dark: #0f172a;\r\n --darker: #020617;\r\n }\r\n \r\n #particles-js {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n z-index: -1;\r\n opacity: 0.3;\r\n }\r\n \r\n .player-container {\r\n background: rgba(15, 23, 42, 0.7);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n }\r\n \r\n .video-wrapper {\r\n transform-style: preserve-3d;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n }\r\n \r\n .video-wrapper:hover {\r\n transform: translateY(-5px) rotateX(2deg);\r\n }\r\n \r\n #player {\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), \r\n 0 10px 10px -5px rgba(0, 0, 0, 0.2),\r\n inset 0 0 30px rgba(99, 102, 241, 0.3);\r\n border-radius: 16px;\r\n transform: translateZ(20px);\r\n width: 100%;\r\n height: 70vh;\r\n }\r\n \r\n .playlist-section {\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--primary) rgba(15, 23, 42, 0.5);\r\n }\r\n \r\n .playlist-section::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n .playlist-section::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.5);\r\n border-radius: 10px;\r\n }\r\n .playlist-section::-webkit-scrollbar-thumb {\r\n background: linear-gradient(to bottom, var(--primary), var(--secondary));\r\n border-radius: 10px;\r\n }\r\n .playlist-section::-webkit-scrollbar-thumb:hover {\r\n background: linear-gradient(to bottom, var(--primary), var(--accent));\r\n }\r\n \r\n .playlist-header {\r\n font-family: 'Montserrat', sans-serif;\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);\r\n }\r\n \r\n .playlist-item {\r\n background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(10px);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n transform-style: preserve-3d;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .playlist-item::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n z-index: -1;\r\n }\r\n \r\n .playlist-item:hover {\r\n transform: translateY(-3px) translateZ(10px);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .playlist-item:hover::before {\r\n opacity: 1;\r\n }\r\n \r\n .playlist-item.active {\r\n background: linear-gradient(145deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));\r\n border-color: rgba(236, 72, 153, 0.3);\r\n transform: translateX(10px) translateZ(20px);\r\n box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.3);\r\n }\r\n \r\n .playlist-item.active::before {\r\n opacity: 1;\r\n background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(236, 72, 153, 0.3) 100%);\r\n }\r\n \r\n .thumbnail-wrapper {\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n transform-style: preserve-3d;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .thumbnail-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(45deg, rgba(99, 102, 241, 0.3) 0%, rgba(236, 72, 153, 0.3) 100%);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .playlist-item:hover .thumbnail-wrapper::after {\r\n opacity: 0.5;\r\n }\r\n \r\n .play-icon {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%) scale(0.8);\r\n opacity: 0;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n color: white;\r\n background: rgba(0, 0, 0, 0.7);\r\n border-radius: 50%;\r\n width: 36px;\r\n height: 36px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 2;\r\n }\r\n \r\n .playlist-item:hover .play-icon {\r\n opacity: 1;\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n \r\n .active .play-icon {\r\n opacity: 1;\r\n transform: translate(-50%, -50%) scale(1);\r\n background: white;\r\n color: var(--primary);\r\n box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5);\r\n }\r\n \r\n .progress-container {\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(5px);\r\n }\r\n \r\n .progress-bar {\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);\r\n transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n .custom-controls {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.7), transparent) !important;\r\n padding: 20px;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n pointer-events: none;\r\n }\r\n \r\n .video-wrapper:hover .custom-controls {\r\n opacity: 1;\r\n z-index: 999;\r\n }\r\n \r\n .custom-controls > * {\r\n pointer-events: auto;\r\n }\r\n \r\n .timeline-container {\r\n width: 100%;\r\n height: 6px;\r\n background: rgba(255,255,255,0.2);\r\n border-radius: 3px;\r\n cursor: pointer;\r\n }\r\n \r\n .timeline {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n border-radius: 3px;\r\n width: 0%;\r\n position: relative;\r\n }\r\n \r\n .timeline::after {\r\n content: '';\r\n position: absolute;\r\n right: -6px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 12px;\r\n height: 12px;\r\n background: white;\r\n border-radius: 50%;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .timeline-container:hover .timeline::after {\r\n opacity: 1;\r\n }\r\n \r\n .controls-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .left-controls, .right-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n \r\n .control-btn {\r\n color: white;\r\n background: transparent;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 16px;\r\n transition: transform 0.2s ease;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n \r\n .control-btn:hover {\r\n transform: scale(1.1);\r\n color: var(--primary);\r\n }\r\n \r\n .volume-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n \r\n .volume-slider {\r\n width: 80px;\r\n height: 4px;\r\n -webkit-appearance: none;\r\n background: rgba(255,255,255,0.2);\r\n border-radius: 2px;\r\n outline: none;\r\n opacity: 0;\r\n transition: opacity 0.3s ease, width 0.3s ease;\r\n }\r\n \r\n .volume-container:hover .volume-slider {\r\n opacity: 1;\r\n }\r\n \r\n .volume-slider::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 12px;\r\n height: 12px;\r\n background: white;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n }\r\n \r\n .time-display {\r\n font-size: 14px;\r\n color: white;\r\n font-family: monospace;\r\n }\r\n \r\n .fullscreen-btn {\r\n margin-left: 10px;\r\n }\r\n \r\n .controls-container {\r\n background: rgba(15, 23, 42, 0.8);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .control-btn {\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n transform-style: preserve-3d;\r\n }\r\n \r\n .control-btn:hover {\r\n transform: translateY(-2px) scale(1.1) translateZ(10px);\r\n }\r\n \r\n .play-pause-btn {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3), \r\n 0 2px 4px -1px rgba(99, 102, 241, 0.2),\r\n inset 0 0 10px rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n .play-pause-btn:hover {\r\n background: linear-gradient(135deg, var(--secondary), var(--accent));\r\n box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3), \r\n inset 0 0 15px rgba(255, 255, 255, 0.3);\r\n }\r\n \r\n .now-playing-badge {\r\n background: linear-gradient(135deg, var(--primary), var(--accent));\r\n box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);\r\n animation: pulse 2s infinite;\r\n }\r\n \r\n @keyframes pulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }\r\n 70% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }\r\n }\r\n \r\n .time-display {\r\n text-shadow: 0 0 8px rgba(99, 102, 241, 0.5);\r\n }\r\n \r\n .ripple {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.4);\r\n transform: scale(0);\r\n animation: ripple 0.6s linear;\r\n pointer-events: none;\r\n }\r\n \r\n @keyframes ripple {\r\n to {\r\n transform: scale(4);\r\n opacity: 0;\r\n }\r\n }\r\n \r\n .video-change-animation {\r\n animation: videoChange 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;\r\n }\r\n \r\n @keyframes videoChange {\r\n 0% { transform: scale(1) translateZ(0); opacity: 1; }\r\n 50% { transform: scale(0.9) translateZ(-50px); opacity: 0.5; }\r\n 100% { transform: scale(1) translateZ(0); opacity: 1; }\r\n }\r\n \r\n .floating {\r\n animation: floating 8s ease-in-out infinite;\r\n }\r\n \r\n @keyframes floating {\r\n 0% { transform: translateY(0px) rotate(0deg); }\r\n 50% { transform: translateY(-20px) rotate(2deg); }\r\n 100% { transform: translateY(0px) rotate(0deg); }\r\n }\r\n \r\n .glow {\r\n filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.7));\r\n }\r\n \r\n .neon-text {\r\n text-shadow: 0 0 5px rgba(99, 102, 241, 0.8),\r\n 0 0 10px rgba(99, 102, 241, 0.6),\r\n 0 0 15px rgba(99, 102, 241, 0.4);\r\n }\r\n \r\n .click-to-play {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(0, 0, 0, 0.5);\r\n z-index: 10;\r\n cursor: pointer;\r\n opacity: 1;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .click-to-play.hidden {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n \r\n .click-to-play-content {\r\n background: rgba(15, 23, 42, 0.8);\r\n padding: 20px 30px;\r\n border-radius: 12px;\r\n text-align: center;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .loading-spinner {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n pointer-events: none;\r\n }\r\n \r\n .loading-spinner.active {\r\n opacity: 1;\r\n }\r\n \r\n .spinner {\r\n width: 48px;\r\n height: 48px;\r\n border: 5px solid rgba(99, 102, 241, 0.2);\r\n border-bottom-color: var(--primary);\r\n border-radius: 50%;\r\n display: inline-block;\r\n box-sizing: border-box;\r\n animation: rotation 1s linear infinite;\r\n }\r\n \r\n @keyframes rotation {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n \r\n .auto-play-toggle {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n z-index: 20;\r\n background: rgba(15, 23, 42, 0.8);\r\n border-radius: 20px;\r\n padding: 8px 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n cursor: pointer;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .auto-play-toggle span {\r\n font-size: 14px;\r\n color: white;\r\n }\r\n \r\n .auto-play-toggle .toggle {\r\n width: 40px;\r\n height: 20px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 10px;\r\n position: relative;\r\n transition: background 0.3s ease;\r\n }\r\n \r\n .auto-play-toggle .toggle::after {\r\n content: '';\r\n position: absolute;\r\n top: 2px;\r\n left: 2px;\r\n width: 16px;\r\n height: 16px;\r\n background: white;\r\n border-radius: 50%;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .auto-play-toggle.active .toggle {\r\n background: var(--primary);\r\n }\r\n \r\n .auto-play-toggle.active .toggle::after {\r\n transform: translateX(20px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"h-screen overflow-hidden flex items-center justify-center p-4 \">\r\n \r\n <div id=\"particles-js\"><\/div>\r\n \r\n \r\n <div class=\"absolute top-10 left-10 w-32 h-32 rounded-full bg-purple-600 opacity-10 blur-xl floating\"><\/div>\r\n <div class=\"absolute bottom-20 right-20 w-40 h-40 rounded-full bg-indigo-600 opacity-10 blur-xl floating\" style=\"animation-delay: 2s;\"><\/div>\r\n <div class=\"absolute top-1\/3 right-1\/4 w-24 h-24 rounded-full bg-pink-600 opacity-10 blur-xl floating\" style=\"animation-delay: 4s;\"><\/div>\r\n \r\n \r\n <div class=\"player-container w-full max-w-7xl h-[90vh] flex\">\r\n \r\n <div class=\"flex-1 p-8 flex justify-center items-center relative\">\r\n <div class=\"video-wrapper w-full h-full flex justify-center items-center\">\r\n <div id=\"player\" aria-label=\"Video player\"><\/div>\r\n \r\n \r\n <div class=\"loading-spinner\" id=\"loadingSpinner\">\r\n <span class=\"spinner\"><\/span>\r\n <\/div>\r\n \r\n \r\n <div class=\"click-to-play hidden\" id=\"clickToPlay\">\r\n <div class=\"click-to-play-content\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-16 w-16 mx-auto text-indigo-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Click to Play<\/h3>\r\n <p class=\"text-gray-300 text-sm\">Browser requires interaction to start playback<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"auto-play-toggle active\" id=\"autoPlayToggle\">\r\n <span>Auto-play<\/span>\r\n <div class=\"toggle\"><\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"custom-controls\">\r\n <div class=\"timeline-container\" id=\"timelineContainer\">\r\n <div class=\"timeline\" id=\"timeline\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"controls-row\">\r\n <div class=\"left-controls\">\r\n <button id=\"playPauseBtn\" class=\"control-btn play-pause-btn\" tabindex=\"0\" aria-label=\"Play video\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/button>\r\n \r\n <div class=\"volume-container\">\r\n <button id=\"muteBtn\" class=\"control-btn\" tabindex=\"0\" aria-label=\"Mute video\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.536 8.464a5 5 0 010 7.072M12 6a7.975 7.975 0 015.657 2.343m0 0a7.975 7.975 0 010 11.314m-11.314 0a7.975 7.975 0 010-11.314m0 0a7.975 7.975 0 015.657-2.343\" \/>\r\n <\/svg>\r\n <\/button>\r\n <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"1\" class=\"volume-slider\" id=\"volumeSlider\" aria-label=\"Volume control\">\r\n <\/div>\r\n \r\n <div class=\"time-display\">\r\n <span id=\"currentTime\">00:00<\/span> \/ <span id=\"duration\">00:00<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"right-controls\">\r\n <button id=\"fullscreenBtn\" class=\"control-btn fullscreen-btn\" tabindex=\"0\" aria-label=\"Enter fullscreen\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10\" \/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"w-96 border-l border-gray-800 flex flex-col\">\r\n <div class=\"p-6 border-b border-gray-800\">\r\n <h2 class=\"playlist-header text-3xl font-extrabold mb-2\">PLAYLIST<\/h2>\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"text-sm text-gray-400\">7 videos<\/div>\r\n <div class=\"flex items-center space-x-2 time-display\">\r\n <span id=\"currentTimeDisplay\" class=\"text-sm text-indigo-300\">00:00<\/span>\r\n <span class=\"text-gray-600\">\/<\/span>\r\n <span id=\"totalTimeDisplay\" class=\"text-sm text-indigo-300\">00:00<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"playlist\" class=\"flex-1 p-4 overflow-y-auto playlist-section space-y-4\">\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"dQw4w9WgXcQ\" \r\n data-title=\"Rick Astley - Never Gonna Give You Up\" \r\n data-description=\"Official video for Never Gonna Give You Up by Rick Astley\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/dQw4w9WgXcQ\/mqdefault.jpg\" alt=\"Video 1 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Never Gonna Give You Up<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:32<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"3tmd-ClpJxA\" \r\n data-title=\"The Weeknd - Blinding Lights\" \r\n data-description=\"Official music video for Blinding Lights by The Weeknd\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/3tmd-ClpJxA\/mqdefault.jpg\" alt=\"Video 2 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Blinding Lights<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:20<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"hLQl3W_Qo5U\" \r\n data-title=\"Adele - Hello\" \r\n data-description=\"Official music video for Hello by Adele\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/hLQl3W_Qo5U\/mqdefault.jpg\" alt=\"Video 3 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Hello<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">05:00<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"7wtfhZwyrcc\" \r\n data-title=\"Imagine Dragons - Believer\" \r\n data-description=\"Official music video for Believer by Imagine Dragons\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/7wtfhZwyrcc\/mqdefault.jpg\" alt=\"Video 4 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Believer<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:24<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"pRpeEdMmmQ0\" \r\n data-title=\"Shakira - Waka Waka\" \r\n data-description=\"Official music video for Waka Waka by Shakira\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/pRpeEdMmmQ0\/mqdefault.jpg\" alt=\"Video 5 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Waka Waka<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:22<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative\" \r\n data-video-id=\"y6120QOlsfU\" \r\n data-title=\"Darude - Sandstorm\" \r\n data-description=\"Official music video for Sandstorm by Darude\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/y6120QOlsfU\/mqdefault.jpg\" alt=\"Video 6 Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Sandstorm<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:45<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-gray-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playlist-item flex items-center p-4 rounded-xl cursor-pointer relative active\" \r\n data-video-id=\"XFkIdOO15po\" \r\n data-title=\"Ulster University Explained - Scholarships, Students, Courses\" \r\n data-description=\"Learn about Ulster University's scholarships, student life, and course offerings\">\r\n <div class=\"thumbnail-wrapper w-28 h-16 flex-shrink-0 mr-4 relative\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/XFkIdOO15po\/mqdefault.jpg\" alt=\"Ulster University Video Thumbnail\" class=\"w-full h-full object-cover rounded-lg\">\r\n <div class=\"play-icon\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"flex justify-between items-start\">\r\n <span class=\"font-semibold text-white truncate\">Ulster University Explained<\/span>\r\n <span class=\"now-playing-badge text-xs text-white px-2 py-1 rounded-full ml-2 text-xs\">NOW PLAYING<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-400 mt-1 duration\">03:45<\/div>\r\n <div class=\"w-full progress-container h-1.5 rounded-full mt-2 bg-gray-700\">\r\n <div class=\"progress-bar h-full rounded-full bg-red-600\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize particles.js\r\n particlesJS(\"particles-js\", {\r\n \"particles\": {\r\n \"number\": { \"value\": 80, \"density\": { \"enable\": true, \"value_area\": 800 } },\r\n \"color\": { \"value\": \"#6366f1\" },\r\n \"shape\": { \"type\": \"circle\", \"stroke\": { \"width\": 0, \"color\": \"#000000\" }, \"polygon\": { \"nb_sides\": 5 } },\r\n \"opacity\": { \"value\": 0.5, \"random\": true, \"anim\": { \"enable\": false } },\r\n \"size\": { \"value\": 3, \"random\": true, \"anim\": { \"enable\": false } },\r\n \"line_linked\": { \"enable\": true, \"distance\": 150, \"color\": \"#6366f1\", \"opacity\": 0.2, \"width\": 1 },\r\n \"move\": { \"enable\": true, \"speed\": 2, \"direction\": \"none\", \"random\": true, \"straight\": false, \"out_mode\": \"out\", \"bounce\": false }\r\n },\r\n \"interactivity\": {\r\n \"detect_on\": \"canvas\",\r\n \"events\": { \"onhover\": { \"enable\": true, \"mode\": \"grab\" }, \"onclick\": { \"enable\": true, \"mode\": \"push\" }, \"resize\": true },\r\n \"modes\": { \"grab\": { \"distance\": 140, \"line_linked\": { \"opacity\": 0.5 } }, \"push\": { \"particles_nb\": 4 } }\r\n },\r\n \"retina_detect\": true\r\n });\r\n\r\n \/\/ YouTube API setup\r\n let player;\r\n let playerReady = false;\r\n let autoPlayEnabled = true;\r\n const playlistItems = document.querySelectorAll('.playlist-item');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const muteBtn = document.getElementById('muteBtn');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n const timeline = document.getElementById('timeline');\r\n const timelineContainer = document.getElementById('timelineContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const fullscreenBtn = document.getElementById('fullscreenBtn');\r\n const currentTimeDisplay = document.getElementById('currentTimeDisplay');\r\n const totalTimeDisplay = document.getElementById('totalTimeDisplay');\r\n const clickToPlay = document.getElementById('clickToPlay');\r\n const loadingSpinner = document.getElementById('loadingSpinner');\r\n const autoPlayToggle = document.getElementById('autoPlayToggle');\r\n const videoTitleEl = document.createElement('h2');\r\n const videoDescriptionEl = document.createElement('p');\r\n\r\n \/\/ Add video info elements to the DOM\r\n const playerInfoContainer = document.querySelector('.video-wrapper');\r\n videoTitleEl.className = 'absolute top-4 left-4 text-xl font-semibold text-white neon-text';\r\n videoDescriptionEl.className = 'absolute top-16 left-4 text-sm text-gray-300 max-w-lg';\r\n playerInfoContainer.appendChild(videoTitleEl);\r\n playerInfoContainer.appendChild(videoDescriptionEl);\r\n\r\n \/\/ Format duration in mm:ss\r\n function formatDuration(seconds) {\r\n if (isNaN(seconds)) return '00:00';\r\n const minutes = Math.floor(seconds \/ 60);\r\n const secs = Math.floor(seconds % 60);\r\n return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\r\n }\r\n\r\n \/\/ Create ripple effect\r\n function createRipple(event) {\r\n const button = event.currentTarget;\r\n const rect = button.getBoundingClientRect();\r\n const x = event.clientX - rect.left;\r\n const y = event.clientY - rect.top;\r\n\r\n const ripple = document.createElement('span');\r\n ripple.classList.add('ripple');\r\n ripple.style.left = `${x}px`;\r\n ripple.style.top = `${y}px`;\r\n\r\n button.appendChild(ripple);\r\n\r\n setTimeout(() => ripple.remove(), 600);\r\n }\r\n\r\n \/\/ Load YouTube API if not already loaded\r\n function loadYouTubeAPI() {\r\n if (window.YT && window.YT.Player) {\r\n initializePlayer();\r\n } else {\r\n const tag = document.createElement('script');\r\n tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\r\n const firstScriptTag = document.getElementsByTagName('script')[0];\r\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n \r\n \/\/ Set up callback for when API is ready\r\n window.onYouTubeIframeAPIReady = initializePlayer;\r\n }\r\n }\r\n\r\n \/\/ Initialize YouTube player\r\n function initializePlayer() {\r\n try {\r\n player = new YT.Player('player', {\r\n height: '100%',\r\n width: '100%',\r\n videoId: 'XFkIdOO15po',\r\n playerVars: {\r\n 'playsinline': 1,\r\n 'controls': 0,\r\n 'showinfo': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1,\r\n 'enablejsapi': 1,\r\n 'autoplay': 0\r\n },\r\n events: {\r\n 'onReady': onPlayerReady,\r\n 'onStateChange': onPlayerStateChange,\r\n 'onError': onPlayerError\r\n }\r\n });\r\n } catch (e) {\r\n console.error(\"YouTube Player initialization failed:\", e);\r\n clickToPlay.querySelector('h3').textContent = 'Player Error';\r\n clickToPlay.querySelector('p').textContent = 'Failed to initialize player. Please refresh the page.';\r\n clickToPlay.classList.remove('hidden');\r\n }\r\n }\r\n\r\n function onPlayerReady(event) {\r\n playerReady = true;\r\n playPauseBtn.disabled = false;\r\n updateVolume();\r\n loadVideoDurations();\r\n updateVideoInfo();\r\n \r\n updatePlayButtonState();\r\n \r\n \/\/ Set up user interaction requirements\r\n document.addEventListener('click', initPlayback, { once: true });\r\n document.addEventListener('touchstart', initPlayback, { once: true });\r\n document.addEventListener('keydown', initPlayback, { once: true });\r\n }\r\n\r\n function initPlayback() {\r\n if (!playerReady) return;\r\n \r\n \/\/ First try normal playback\r\n player.playVideo().then(() => {\r\n clickToPlay.classList.add('hidden');\r\n }).catch(error => {\r\n console.log(\"Autoplay blocked, trying muted playback:\", error);\r\n \/\/ If normal playback fails, try muted playback\r\n player.mute();\r\n player.playVideo().then(() => {\r\n clickToPlay.classList.add('hidden');\r\n }).catch(muteError => {\r\n console.log(\"Muted playback also blocked:\", muteError);\r\n clickToPlay.querySelector('p').textContent = 'Click to play video';\r\n clickToPlay.classList.remove('hidden');\r\n });\r\n });\r\n }\r\n\r\n function updatePlayButtonState() {\r\n const playerState = player.getPlayerState();\r\n if (playerState === YT.PlayerState.PLAYING) {\r\n playPauseBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\r\n <\/svg>\r\n `;\r\n playPauseBtn.setAttribute('aria-label', 'Pause video');\r\n clickToPlay.classList.add('hidden');\r\n } else {\r\n playPauseBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\" \/>\r\n <\/svg>\r\n `;\r\n playPauseBtn.setAttribute('aria-label', 'Play video');\r\n }\r\n }\r\n\r\n function onPlayerStateChange(event) {\r\n updatePlayButtonState();\r\n \r\n if (event.data === YT.PlayerState.PLAYING) {\r\n clickToPlay.classList.add('hidden');\r\n updateTime();\r\n startTimeUpdate();\r\n loadingSpinner.classList.remove('active');\r\n } else if (event.data === YT.PlayerState.ENDED) {\r\n \/\/ When video ends, play next one if autoplay is enabled\r\n if (autoPlayEnabled) {\r\n playNextVideo();\r\n }\r\n } else if (event.data === YT.PlayerState.BUFFERING) {\r\n loadingSpinner.classList.add('active');\r\n } else {\r\n loadingSpinner.classList.remove('active');\r\n }\r\n }\r\n\r\n function onPlayerError(event) {\r\n console.error('YouTube player error:', event.data);\r\n loadingSpinner.classList.remove('active');\r\n \r\n const errorMessages = {\r\n 2: 'Invalid video parameters. Please try another video.',\r\n 5: 'This video cannot be played in the embedded player.',\r\n 100: 'Video not found or removed.',\r\n 101: 'Embedding disabled by video owner.',\r\n 150: 'Embedding disabled by video owner.'\r\n };\r\n \r\n const message = errorMessages[event.data] || 'Video playback failed. Please try another video.';\r\n \r\n clickToPlay.querySelector('h3').textContent = 'Playback Error';\r\n clickToPlay.querySelector('p').textContent = message;\r\n clickToPlay.classList.remove('hidden');\r\n \r\n const activeItem = document.querySelector('.playlist-item.active');\r\n if (activeItem) {\r\n activeItem.querySelector('.duration').textContent = 'Error';\r\n \/\/ If autoplay is enabled, try next video after error\r\n if (autoPlayEnabled) {\r\n setTimeout(playNextVideo, 2000);\r\n }\r\n }\r\n }\r\n\r\n function updateVideoInfo() {\r\n const activeItem = document.querySelector('.playlist-item.active');\r\n if (activeItem) {\r\n videoTitleEl.textContent = activeItem.dataset.title;\r\n videoDescriptionEl.textContent = activeItem.dataset.description;\r\n }\r\n }\r\n\r\n let timeUpdateInterval;\r\n function startTimeUpdate() {\r\n clearInterval(timeUpdateInterval);\r\n timeUpdateInterval = setInterval(updateTime, 1000);\r\n }\r\n\r\n function updateTime() {\r\n if (!player || !player.getCurrentTime) return;\r\n const currentTime = player.getCurrentTime();\r\n const duration = player.getDuration();\r\n\r\n if (!isNaN(duration)) {\r\n const percent = (currentTime \/ duration) * 100;\r\n timeline.style.width = `${percent}%`;\r\n\r\n currentTimeEl.textContent = formatDuration(currentTime);\r\n durationEl.textContent = formatDuration(duration);\r\n currentTimeDisplay.textContent = formatDuration(currentTime);\r\n totalTimeDisplay.textContent = formatDuration(duration);\r\n\r\n const activeItem = document.querySelector('.playlist-item.active');\r\n if (activeItem) {\r\n activeItem.querySelector('.progress-bar').style.width = `${percent}%`;\r\n }\r\n }\r\n }\r\n\r\n function playPreviousVideo() {\r\n const activeItem = document.querySelector('.playlist-item.active');\r\n const prevItem = activeItem.previousElementSibling || playlistItems[playlistItems.length - 1];\r\n if (prevItem) playVideo(prevItem);\r\n }\r\n\r\n function playNextVideo() {\r\n const activeItem = document.querySelector('.playlist-item.active');\r\n const nextItem = activeItem.nextElementSibling || playlistItems[0];\r\n if (nextItem) playVideo(nextItem);\r\n }\r\n\r\n function togglePlayPause(e) {\r\n if (e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n if (!playerReady) return;\r\n\r\n const playerState = player.getPlayerState();\r\n \r\n if (playerState === YT.PlayerState.PLAYING) {\r\n player.pauseVideo();\r\n } else {\r\n player.playVideo().catch(error => {\r\n console.error('Playback failed:', error);\r\n player.mute();\r\n player.playVideo().catch(muteError => {\r\n console.error('Muted playback failed:', muteError);\r\n clickToPlay.querySelector('p').textContent = 'Please click to play the video.';\r\n clickToPlay.classList.remove('hidden');\r\n });\r\n });\r\n }\r\n }\r\n\r\n function toggleMute() {\r\n if (player.isMuted()) {\r\n player.unMute();\r\n volumeSlider.value = player.getVolume() \/ 100;\r\n muteBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.536 8.464a5 5 0 010 7.072M12 6a7.975 7.975 0 015.657 2.343m0 0a7.975 7.975 0 010 11.314m-11.314 0a7.975 7.975 0 010-11.314m0 0a7.975 7.975 0 015.657-2.343\" \/>\r\n <\/svg>\r\n `;\r\n muteBtn.setAttribute('aria-label', 'Mute video');\r\n } else {\r\n player.mute();\r\n volumeSlider.value = 0;\r\n muteBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z\" clip-rule=\"evenodd\" \/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2\" \/>\r\n <\/svg>\r\n `;\r\n muteBtn.setAttribute('aria-label', 'Unmute video');\r\n }\r\n }\r\n\r\n function updateVolume() {\r\n if (!player) return;\r\n player.setVolume(volumeSlider.value * 100);\r\n if (volumeSlider.value == 0) {\r\n player.mute();\r\n muteBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z\" clip-rule=\"evenodd\" \/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2\" \/>\r\n <\/svg>\r\n `;\r\n muteBtn.setAttribute('aria-label', 'Unmute video');\r\n } else {\r\n player.unMute();\r\n muteBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.536 8.464a5 5 0 010 7.072M12 6a7.975 7.975 0 015.657 2.343m0 0a7.975 7.975 0 010 11.314m-11.314 0a7.975 7.975 0 010-11.314m0 0a7.975 7.975 0 015.657-2.343\" \/>\r\n <\/svg>\r\n `;\r\n muteBtn.setAttribute('aria-label', 'Mute video');\r\n }\r\n }\r\n\r\n function seekVideo(e) {\r\n if (!player) return;\r\n const rect = timelineContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n player.seekTo(pos * player.getDuration(), true);\r\n }\r\n\r\n function toggleFullscreen() {\r\n if (!document.fullscreenElement) {\r\n document.querySelector('.player-container').requestFullscreen().catch(err => {\r\n console.error(`Error enabling fullscreen: ${err.message}`);\r\n });\r\n fullscreenBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/>\r\n <\/svg>\r\n `;\r\n fullscreenBtn.setAttribute('aria-label', 'Exit fullscreen');\r\n } else {\r\n document.exitFullscreen();\r\n fullscreenBtn.innerHTML = `\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10\" \/>\r\n <\/svg>\r\n `;\r\n fullscreenBtn.setAttribute('aria-label', 'Enter fullscreen');\r\n }\r\n }\r\n\r\n function playVideo(item) {\r\n if (!playerReady) return;\r\n \r\n loadingSpinner.classList.add('active');\r\n const videoWrapper = document.querySelector('.video-wrapper');\r\n videoWrapper.classList.add('video-change-animation');\r\n \r\n playlistItems.forEach(i => {\r\n i.classList.remove('active');\r\n i.querySelector('.progress-bar').style.width = '0%';\r\n const badge = i.querySelector('.now-playing-badge');\r\n if (badge) badge.remove();\r\n });\r\n\r\n item.classList.add('active');\r\n\r\n const titleContainer = item.querySelector('.font-semibold').parentNode;\r\n const badge = document.createElement('span');\r\n badge.className = 'now-playing-badge text-xs text-white px-2 py-1 rounded-full ml-2 text-xs';\r\n badge.textContent = 'NOW PLAYING';\r\n titleContainer.appendChild(badge);\r\n\r\n const videoId = item.getAttribute('data-video-id');\r\n \r\n try {\r\n player.loadVideoById(videoId).then(() => {\r\n setTimeout(() => {\r\n videoWrapper.classList.remove('video-change-animation');\r\n loadingSpinner.classList.remove('active');\r\n \r\n \/\/ Try to play after load if autoplay is enabled\r\n if (autoPlayEnabled) {\r\n player.playVideo().catch(playError => {\r\n console.log(\"Playback after load failed:\", playError);\r\n clickToPlay.classList.remove('hidden');\r\n });\r\n } else {\r\n \/\/ If autoplay is disabled, just show the play button\r\n updatePlayButtonState();\r\n }\r\n }, 800);\r\n }).catch(loadError => {\r\n console.error(\"Error loading video:\", loadError);\r\n loadingSpinner.classList.remove('active');\r\n onPlayerError({data: 2});\r\n });\r\n } catch (e) {\r\n console.error(\"Video load exception:\", e);\r\n loadingSpinner.classList.remove('active');\r\n onPlayerError({data: 2});\r\n }\r\n \r\n item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n updateVideoInfo();\r\n }\r\n\r\n function loadVideoDurations() {\r\n playlistItems.forEach(item => {\r\n const videoId = item.getAttribute('data-video-id');\r\n const durationElement = item.querySelector('.duration');\r\n\r\n const demoDurations = {\r\n 'dQw4w9WgXcQ': '03:32',\r\n '3tmd-ClpJxA': '03:20',\r\n 'hLQl3W_Qo5U': '05:00',\r\n '7wtfhZwyrcc': '03:24',\r\n 'pRpeEdMmmQ0': '03:22',\r\n 'y6120QOlsfU': '03:45',\r\n 'XFkIdOO15po': '03:45'\r\n };\r\n\r\n if (demoDurations[videoId]) {\r\n durationElement.textContent = demoDurations[videoId];\r\n } else {\r\n durationElement.textContent = 'Unknown';\r\n }\r\n });\r\n }\r\n\r\n function toggleAutoPlay() {\r\n autoPlayEnabled = !autoPlayEnabled;\r\n autoPlayToggle.classList.toggle('active', autoPlayEnabled);\r\n \r\n \/\/ If enabling autoplay and player is paused, try to play\r\n if (autoPlayEnabled && player.getPlayerState() === YT.PlayerState.PAUSED) {\r\n player.playVideo().catch(error => {\r\n console.log(\"Autoplay blocked:\", error);\r\n });\r\n }\r\n }\r\n\r\n \/\/ Initialize playlist interactions\r\n playlistItems.forEach(item => {\r\n item.addEventListener('click', e => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n playVideo(item);\r\n });\r\n\r\n item.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n playVideo(item);\r\n }\r\n });\r\n });\r\n\r\n \/\/ Event listeners for controls\r\n playPauseBtn.addEventListener('click', togglePlayPause);\r\n playPauseBtn.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n togglePlayPause(e);\r\n }\r\n });\r\n\r\n muteBtn.addEventListener('click', e => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n toggleMute();\r\n });\r\n\r\n muteBtn.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n toggleMute();\r\n }\r\n });\r\n\r\n volumeSlider.addEventListener('input', updateVolume);\r\n\r\n timelineContainer.addEventListener('click', seekVideo);\r\n\r\n fullscreenBtn.addEventListener('click', e => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n toggleFullscreen();\r\n });\r\n\r\n fullscreenBtn.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n createRipple(e);\r\n toggleFullscreen();\r\n }\r\n });\r\n\r\n autoPlayToggle.addEventListener('click', toggleAutoPlay);\r\n\r\n \/\/ Keyboard shortcuts\r\n document.addEventListener('keydown', e => {\r\n if (e.target.tagName === 'INPUT') return;\r\n if (e.code === 'Space') {\r\n e.preventDefault();\r\n togglePlayPause(e);\r\n } else if (e.code === 'ArrowRight') {\r\n if (player) player.seekTo(player.getCurrentTime() + 5, true);\r\n } else if (e.code === 'ArrowLeft') {\r\n if (player) player.seekTo(player.getCurrentTime() - 5, true);\r\n } else if (e.code === 'ArrowUp') {\r\n playPreviousVideo();\r\n } else if (e.code === 'ArrowDown') {\r\n playNextVideo();\r\n } else if (e.code === 'KeyM') {\r\n toggleMute();\r\n } else if (e.code === 'KeyF') {\r\n toggleFullscreen();\r\n } else if (e.code === 'KeyA') {\r\n toggleAutoPlay();\r\n }\r\n });\r\n\r\n \/\/ Disable play\/pause button until player is ready\r\n playPauseBtn.disabled = true;\r\n\r\n \/\/ Start loading the YouTube API\r\n loadYouTubeAPI();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"two_page_speed":[],"footnotes":""},"class_list":["post-5440","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Podcast - Paragon Education<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/paragoneducation.sa\/ar\/podcast\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Podcast - Paragon Education\" \/>\n<meta property=\"og:url\" content=\"https:\/\/paragoneducation.sa\/ar\/podcast\/\" \/>\n<meta property=\"og:site_name\" content=\"Paragon Education\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/paragoneducation.sa\/podcast\/\",\"url\":\"https:\/\/paragoneducation.sa\/podcast\/\",\"name\":\"Podcast - Paragon Education\",\"isPartOf\":{\"@id\":\"https:\/\/paragoneducation.sa\/#website\"},\"datePublished\":\"2025-07-26T13:47:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/paragoneducation.sa\/podcast\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/paragoneducation.sa\/podcast\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/paragoneducation.sa\/podcast\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/paragoneducation.sa\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Podcast\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/paragoneducation.sa\/#website\",\"url\":\"https:\/\/paragoneducation.sa\/\",\"name\":\"Paragon Education\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/paragoneducation.sa\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/paragoneducation.sa\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/paragoneducation.sa\/#organization\",\"name\":\"Paragon Education\",\"url\":\"https:\/\/paragoneducation.sa\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/paragoneducation.sa\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/paragoneducation.sa\/wp-content\/uploads\/2025\/05\/download-1-1.png\",\"contentUrl\":\"https:\/\/paragoneducation.sa\/wp-content\/uploads\/2025\/05\/download-1-1.png\",\"width\":1024,\"height\":683,\"caption\":\"Paragon Education\"},\"image\":{\"@id\":\"https:\/\/paragoneducation.sa\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Podcast - Paragon Education","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/paragoneducation.sa\/ar\/podcast\/","og_locale":"ar_AR","og_type":"article","og_title":"Podcast - Paragon Education","og_url":"https:\/\/paragoneducation.sa\/ar\/podcast\/","og_site_name":"Paragon Education","twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/paragoneducation.sa\/podcast\/","url":"https:\/\/paragoneducation.sa\/podcast\/","name":"Podcast - Paragon Education","isPartOf":{"@id":"https:\/\/paragoneducation.sa\/#website"},"datePublished":"2025-07-26T13:47:02+00:00","breadcrumb":{"@id":"https:\/\/paragoneducation.sa\/podcast\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/paragoneducation.sa\/podcast\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/paragoneducation.sa\/podcast\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/paragoneducation.sa\/"},{"@type":"ListItem","position":2,"name":"Podcast"}]},{"@type":"WebSite","@id":"https:\/\/paragoneducation.sa\/#website","url":"https:\/\/paragoneducation.sa\/","name":"Paragon Education","description":"","publisher":{"@id":"https:\/\/paragoneducation.sa\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/paragoneducation.sa\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/paragoneducation.sa\/#organization","name":"Paragon Education","url":"https:\/\/paragoneducation.sa\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/paragoneducation.sa\/#\/schema\/logo\/image\/","url":"https:\/\/paragoneducation.sa\/wp-content\/uploads\/2025\/05\/download-1-1.png","contentUrl":"https:\/\/paragoneducation.sa\/wp-content\/uploads\/2025\/05\/download-1-1.png","width":1024,"height":683,"caption":"Paragon Education"},"image":{"@id":"https:\/\/paragoneducation.sa\/#\/schema\/logo\/image\/"}}]}},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"techbuzzpk@gmail.com","author_link":"https:\/\/paragoneducation.sa\/ar\/author\/techbuzzpkgmail-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/pages\/5440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/comments?post=5440"}],"version-history":[{"count":1,"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/pages\/5440\/revisions"}],"predecessor-version":[{"id":5441,"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/pages\/5440\/revisions\/5441"}],"wp:attachment":[{"href":"https:\/\/paragoneducation.sa\/ar\/wp-json\/wp\/v2\/media?parent=5440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}