Replace your current iframe + script with this exact block:
Browse files<!-- 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>
- index.html +41 -9
|
@@ -45,16 +45,48 @@
|
|
| 45 |
</style>
|
| 46 |
</head>
|
| 47 |
<body class="bg-black text-white font-['Montserrat']">
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
|
| 57 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 58 |
<button id="mute-btn"
|
| 59 |
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;">
|
| 60 |
<i data-feather="volume-x"></i>
|
|
|
|
| 45 |
</style>
|
| 46 |
</head>
|
| 47 |
<body class="bg-black text-white font-['Montserrat']">
|
| 48 |
+
<!-- YouTube Background Music -->
|
| 49 |
+
<iframe
|
| 50 |
+
id="bg-music"
|
| 51 |
+
width="0" height="0"
|
| 52 |
+
src="https://www.youtube.com/embed/kSlPMMxZfys?enablejsapi=1&autoplay=1&mute=1&loop=1&playlist=kSlPMMxZfys"
|
| 53 |
+
frameborder="0"
|
| 54 |
+
allow="autoplay"
|
| 55 |
+
></iframe>
|
| 56 |
|
| 57 |
+
<script>
|
| 58 |
+
// Wait a moment for YouTube API to load
|
| 59 |
+
window.onload = function () {
|
| 60 |
+
setTimeout(() => {
|
| 61 |
+
var iframe = document.getElementById("bg-music");
|
| 62 |
+
|
| 63 |
+
// Message API → unmutes + plays at full volume
|
| 64 |
+
iframe.contentWindow.postMessage(
|
| 65 |
+
JSON.stringify({
|
| 66 |
+
event: "command",
|
| 67 |
+
func: "unMute"
|
| 68 |
+
}),
|
| 69 |
+
"*"
|
| 70 |
+
);
|
| 71 |
+
iframe.contentWindow.postMessage(
|
| 72 |
+
JSON.stringify({
|
| 73 |
+
event: "command",
|
| 74 |
+
func: "setVolume",
|
| 75 |
+
args: [100]
|
| 76 |
+
}),
|
| 77 |
+
"*"
|
| 78 |
+
);
|
| 79 |
+
iframe.contentWindow.postMessage(
|
| 80 |
+
JSON.stringify({
|
| 81 |
+
event: "command",
|
| 82 |
+
func: "playVideo"
|
| 83 |
+
}),
|
| 84 |
+
"*"
|
| 85 |
+
);
|
| 86 |
+
}, 1500);
|
| 87 |
+
};
|
| 88 |
+
</script>
|
| 89 |
+
<!-- Mute/unmute button -->
|
| 90 |
<button id="mute-btn"
|
| 91 |
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;">
|
| 92 |
<i data-feather="volume-x"></i>
|