diff --git a/video_bg/index.html b/video_bg/index.html new file mode 100644 index 0000000..93a3f02 --- /dev/null +++ b/video_bg/index.html @@ -0,0 +1,50 @@ + + + + + + + + + SpaceX 2.o + + +
+ +
+ +
+
+ + + +
+
+

Never Stop

+

Exploring The World

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat.

+ Explore +
+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/video_bg/main.js b/video_bg/main.js index 65852ea..698a70e 100644 --- a/video_bg/main.js +++ b/video_bg/main.js @@ -4,4 +4,24 @@ const showcase = document.querySelector('.showcase'); menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active'); showcase.classList.toggle('active'); -}) \ No newline at end of file +}) + +// Background video mute / unmute +const video = document.getElementById("bgVideo"); +const muteBtn = document.getElementById("muteBtn"); + +muteBtn.addEventListener("click", () => { + // Ensure video is playing after user interaction + if (video.paused) { + video.play(); + } + + if (video.muted) { + video.muted = false; + muteBtn.textContent = "Mute"; + } else { + video.muted = true; + muteBtn.textContent = "Unmute"; + } +}); + diff --git a/video_bg/style.css b/video_bg/style.css index 599ee6e..7f27efd 100644 --- a/video_bg/style.css +++ b/video_bg/style.css @@ -206,4 +206,26 @@ header .logo { font-size: 2em; } -} \ No newline at end of file +} + +/* ============================= */ +/* Mute / Unmute Button Styles */ +/* ============================= */ + +#muteBtn { + position: absolute; + bottom: 20px; + right: 20px; + padding: 10px 16px; + background: rgba(0, 0, 0, 0.6); + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + z-index: 1001; /* MUST be higher than overlay */ +} + +/* Make sure overlay stays behind clickable elements */ +.overlay { + z-index: 1; +}