Update script.js

script.js

@@ -212,4 +212,58 @@ function initVideoLibrary() {
     });
 
     renderVideos(ALL_VIDEOS);
-}
+}
+
+// --- BACKGROUND MUSIC PLAYER ---
+
+let player;
+let musicPlaying = false;
+
+// This function creates an <iframe> (YouTube player) after the API code downloads.
+function onYouTubeIframeAPIReady() {
+    player = new YT.Player('youtube-player', {
+        height: '0',
+        width: '0',
+        videoId: 'IzogBJpcEWg', // Saudi National Anthem Video ID
+        playerVars: {
+            'autoplay': 0,
+            'controls': 0,
+            'loop': 1,
+            'playlist': 'IzogBJpcEWg', // Required for loop to work
+            'volume': 30 // Set volume to 30%
+        },
+        events: {
+            'onReady': onPlayerReady
+        }
+    });
+}
+
+// The API will call this function when the video player is ready.
+function onPlayerReady(event) {
+    // Player is ready, you could optionally play on load here, but we'll use a button
+    // event.target.playVideo(); 
+}
+
+// Function to toggle music play/pause
+function toggleBackgroundMusic() {
+    const toggleButton = document.getElementById('music-toggle');
+    if (musicPlaying) {
+        player.pauseVideo();
+        toggleButton.innerHTML = '<i class="fas fa-music text-xl"></i>';
+        toggleButton.classList.remove('bg-brand-gold'); // Remove active state color
+        musicPlaying = false;
+    } else {
+        player.playVideo();
+        toggleButton.innerHTML = '<i class="fas fa-pause text-xl"></i>';
+        toggleButton.classList.add('bg-brand-gold'); // Add active state color
+        musicPlaying = true;
+    }
+}
+
+// Add event listener to the button
+document.addEventListener('DOMContentLoaded', () => {
+    const musicButton = document.getElementById('music-toggle');
+    if (musicButton) {
+        musicButton.addEventListener('click', toggleBackgroundMusic);
+    }
+});