Embed muted autoplay + provide a unmute button

Use something like:

<iframe id="bg-music"
width="0" height="0"
src="https://www.youtube.com/embed/kSlPMMxZfys?autoplay=1&mute=1&enablejsapi=1"
allow="autoplay; encrypted-media"
frameborder="0"
></iframe>

index.html

@@ -49,7 +49,7 @@
     <!-- YouTube Background Music -->
     <iframe id="bg-music" 
       width="0" height="0"
-      src="https://www.youtube.com/embed/kSlPMMxZfys?enablejsapi=1&autoplay=1&mute=1"
+      src="https://www.youtube.com/embed/kSlPMMxZfys?enablejsapi=1&autoplay=1&mute=1&loop=1&playlist=kSlPMMxZfys"
       frameborder="0"
       allow="autoplay; encrypted-media"
       allowfullscreen>
@@ -58,10 +58,9 @@
     <!-- Mute/unmute button -->
     <button id="mute-btn" 
       style="position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; background: rgba(0,0,0,0.7); color: white; border: 1px solid #e3b341; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: pointer;">
-      🔇
+      <i data-feather="volume-x"></i>
     </button>
-
-    <!-- Enhanced Vanta.js Background -->
+<!-- Enhanced Vanta.js Background -->
 <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
     <div class="fixed top-0 left-0 w-full h-full z-0 bg-gradient-to-b from-black via-transparent to-black opacity-30"></div>
     <!-- Google Translate -->

script.js

@@ -1,7 +1,50 @@
 
+// YouTube API setup
+let player;
+function onYouTubeIframeAPIReady() {
+    player = new YT.Player('bg-music', {
+        events: {
+            'onReady': onPlayerReady
+        }
+    });
+}
+
+function onPlayerReady(event) {
+    // Player is ready
+    updateMuteButton();
+}
+
+function updateMuteButton() {
+    const muteBtn = document.getElementById('mute-btn');
+    if (player.isMuted()) {
+        muteBtn.innerHTML = '<i data-feather="volume-x"></i>';
+    } else {
+        muteBtn.innerHTML = '<i data-feather="volume-2"></i>';
+    }
+    feather.replace();
+}
+
 // Shared JavaScript across all pages
 document.addEventListener('DOMContentLoaded', () => {
-    // Handle support form submission
+    // Load YouTube API script
+    const tag = document.createElement('script');
+    tag.src = "https://www.youtube.com/iframe_api";
+    const firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    // Mute/unmute button functionality
+    const muteBtn = document.getElementById('mute-btn');
+    muteBtn.addEventListener('click', () => {
+        if (player) {
+            if (player.isMuted()) {
+                player.unMute();
+            } else {
+                player.mute();
+            }
+            updateMuteButton();
+        }
+    });
+// Handle support form submission
     const supportForm = document.getElementById('supportForm');
     if (supportForm) {
         supportForm.addEventListener('submit', function(e) {

style.css

@@ -193,6 +193,13 @@ body::after {
 .goog-te-menu2-item-selected {
     background-color: rgba(227, 179, 65, 0.2) !important;
 }
+/* YouTube player controls */
+#mute-btn i {
+    width: 24px;
+    height: 24px;
+    stroke-width: 2;
+}
+
 .feature-icon {
 width: 60px;
     height: 60px;