Spaces:

Fazbeeer
/

mindmaster-vr-arena-clone

Running

App Files Files Community

Fazbeeer commited on Dec 4, 2025

Commit

fefc3cd

verified ·

1 Parent(s): 9b5d40e

Replace your entire music section with this:

Browse files

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

<script src="https://www.youtube.com/iframe_api"></script>

<script>
let player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('bg-music', {
events: {
onReady: (e) => {
setTimeout(() => {
e.target.unMute();
e.target.setVolume(100);
e.target.playVideo();
}, 800);
}
}
});
}

// Mute Button
document.getElementById("mute-btn").addEventListener("click", () => {
if (player.isMuted()) {
player.unMute();
} else {
player.mute();
}
});
</script>

Files changed (2) hide show

index.html +29 -60
script.js +9 -41

index.html CHANGED Viewed

@@ -45,46 +45,42 @@
     </style>
 </head>
 <body class="bg-black text-white font-['Montserrat']">
-<!-- YouTube Background Music -->
-<iframe
   id="bg-music"
   width="0" height="0"
-  src="https://www.youtube.com/embed/kSlPMMxZfys?enablejsapi=1&autoplay=1&mute=1&loop=1&playlist=kSlPMMxZfys"
   frameborder="0"
   allow="autoplay"
 ></iframe>
 <script>
-  // Wait a moment for YouTube API to load
-  window.onload = function () {
-    setTimeout(() => {
-      var iframe = document.getElementById("bg-music");
-      // Message API → unmutes + plays at full volume
-      iframe.contentWindow.postMessage(
-        JSON.stringify({
-          event: "command",
-          func: "unMute"
-        }),
-        "*"
-      );
-      iframe.contentWindow.postMessage(
-        JSON.stringify({
-          event: "command",
-          func: "setVolume",
-          args: [100]
-        }),
-        "*"
-      );
-      iframe.contentWindow.postMessage(
-        JSON.stringify({
-          event: "command",
-          func: "playVideo"
-        }),
-        "*"
-      );
-    }, 1500);
-  };
 </script>
 <!-- Mute/unmute button -->
     <button id="mute-btn"
@@ -437,34 +433,7 @@ Get Started Now
     </div>
     <!-- Footer Component -->
 <script src="components/footer.js"></script>
-    <script>
-        var player;
-        function onYouTubeIframeAPIReady() {
-            player = new YT.Player('bg-music', {
-                events: {
-                    'onReady': function (event) {
-                        event.target.playVideo();
-                    }
-                }
-            });
-        }
-        document.getElementById("mute-btn").addEventListener("click", function () {
-            if (player.isMuted()) {
-                player.unMute();
-                this.innerHTML = '<i data-feather="volume-2"></i>';
-            } else {
-                player.mute();
-                this.innerHTML = '<i data-feather="volume-x"></i>';
-            }
-            feather.replace();
-        });
-    </script>
-    <script src="https://www.youtube.com/iframe_api"></script>
-    <!-- SNOW EFFECT -->
 <style>
   .snowflake {
     position: fixed;

     </style>
 </head>
 <body class="bg-black text-white font-['Montserrat']">
+<!-- Background Music -->
+<iframe
   id="bg-music"
   width="0" height="0"
+  src="https://www.youtube.com/embed/kSlPMMxZfys?autoplay=1&mute=1&loop=1&playlist=kSlPMMxZfys&enablejsapi=1"
   frameborder="0"
   allow="autoplay"
 ></iframe>
+<script src="https://www.youtube.com/iframe_api"></script>
 <script>
+  let player;
+  function onYouTubeIframeAPIReady() {
+    player = new YT.Player('bg-music', {
+      events: {
+        onReady: (e) => {
+          setTimeout(() => {
+            e.target.unMute();
+            e.target.setVolume(100);
+            e.target.playVideo();
+          }, 800);
+        }
+      }
+    });
+  }
+  // Mute Button
+  document.getElementById("mute-btn").addEventListener("click", () => {
+    if (player.isMuted()) {
+      player.unMute();
+    } else {
+      player.mute();
+    }
+  });
 </script>
 <!-- Mute/unmute button -->
     <button id="mute-btn"
     </div>
     <!-- Footer Component -->
 <script src="components/footer.js"></script>
+<!-- SNOW EFFECT -->
 <style>
   .snowflake {
     position: fixed;

script.js CHANGED Viewed

@@ -1,49 +1,17 @@
-// 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', () => {
-    // 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) {

 // Shared JavaScript across all pages
 document.addEventListener('DOMContentLoaded', () => {
+    // Update mute button icon
     const muteBtn = document.getElementById('mute-btn');
+    if (muteBtn) {
+        muteBtn.addEventListener('click', () => {
+            const icon = muteBtn.querySelector('i');
+            if (icon) {
+                icon.setAttribute('data-feather', player.isMuted() ? 'volume-2' : 'volume-x');
+                feather.replace();
             }
+        });
+    }
 // Handle support form submission
     const supportForm = document.getElementById('supportForm');
     if (supportForm) {