You can add this somewhere inside your existing <body> (e.g. near top or in hero section):
Browse files<!-- Embed YouTube video -->
<iframe id="bg-music"
width="0" height="0"
src="https://www.youtube.com/embed/kSlPMMxZfys?enablejsapi=1&autoplay=1&mute=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
<!-- Mute/unmute button -->
<button id="mute-btn"
style="position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; z-index: 1000;">
🔇 / 🔊
</button>
<script>
// Load YouTube IFrame API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('bg-music');
}
// Toggle mute/unmute when button is clicked
document.getElementById('mute-btn').addEventListener('click', function () {
if (!player) return;
if (player.isMuted()) {
player.unMute();
this.textContent = '🔊'; // or "Unmute"
} else {
player.mute();
this.textContent = '🔇'; // or "Mute"
}
});
</script>
- index.html +16 -1
|
@@ -46,8 +46,23 @@
|
|
| 46 |
</style>
|
| 47 |
</head>
|
| 48 |
<body class="bg-black text-white font-['Montserrat']">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 49 |
<!-- Enhanced Vanta.js Background -->
|
| 50 |
-
|
| 51 |
<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>
|
| 52 |
<!-- Google Translate -->
|
| 53 |
<div id="google_translate_element" class="absolute top-4 right-4 z-50"></div>
|
|
|
|
| 46 |
</style>
|
| 47 |
</head>
|
| 48 |
<body class="bg-black text-white font-['Montserrat']">
|
| 49 |
+
<!-- YouTube Background Music -->
|
| 50 |
+
<iframe id="bg-music"
|
| 51 |
+
width="0" height="0"
|
| 52 |
+
src="https://www.youtube.com/embed/kSlPMMxZfys?enablejsapi=1&autoplay=1&mute=1"
|
| 53 |
+
frameborder="0"
|
| 54 |
+
allow="autoplay; encrypted-media"
|
| 55 |
+
allowfullscreen>
|
| 56 |
+
</iframe>
|
| 57 |
+
|
| 58 |
+
<!-- Mute/unmute button -->
|
| 59 |
+
<button id="mute-btn"
|
| 60 |
+
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;">
|
| 61 |
+
🔇
|
| 62 |
+
</button>
|
| 63 |
+
|
| 64 |
<!-- Enhanced Vanta.js Background -->
|
| 65 |
+
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
|
| 66 |
<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>
|
| 67 |
<!-- Google Translate -->
|
| 68 |
<div id="google_translate_element" class="absolute top-4 right-4 z-50"></div>
|