document.addEventListener("DOMContentLoaded", function() {
const landscape = document.getElementById("landscapeVideo");
const portrait = document.getElementById("portraitVideo");
const btn = document.getElementById("soundToggle");
if (!landscape || !portrait) return;
[landscape, portrait].forEach(v => {
v.muted = true;
v.setAttribute("muted", "");
v.playsInline = true;
v.setAttribute("playsinline", "");
v.preload = "auto";
});
// Keep a single timeline reference
let currentTime = 0;
function syncTime() {
currentTime = landscape.currentTime;
portrait.currentTime = currentTime;
requestAnimationFrame(syncTime);
}
syncTime();
// Decide which video to show
function updateActiveVideo() {
const isMobile = window.innerWidth <= 768;
const active = isMobile ? portrait : landscape;
const inactive = isMobile ? landscape : portrait;
active.classList.add("active-video");
active.classList.remove("inactive-video");
inactive.classList.add("inactive-video");
inactive.classList.remove("active-video");
// Play both videos silently in background
[active, inactive].forEach(v => v.play().catch(()=>{}));
}
// Initial video selection
updateActiveVideo();
// Update on resize (smooth fade)
window.addEventListener("resize", updateActiveVideo);
// Unlock playback on first interaction (mobile)
function unlockVideo() {
[landscape, portrait].forEach(v => v.play().catch(()=>{}));
document.removeEventListener("click", unlockVideo);
document.removeEventListener("touchstart", unlockVideo);
document.removeEventListener("scroll", unlockVideo);
}
document.addEventListener("click", unlockVideo);
document.addEventListener("touchstart", unlockVideo);
document.addEventListener("scroll", unlockVideo);
// Sound toggle
if (btn) {
btn.innerHTML = "🔊 Unmute";
btn.addEventListener("click", async function() {
const isMobile = window.innerWidth <= 768;
const active = isMobile ? portrait : landscape;
if (active.muted) {
active.muted = false;
btn.innerHTML = "🔇 Mute";
} else {
active.muted = true;
btn.innerHTML = "🔊 Unmute";
}
await active.play().catch(() => {});
});
}
});
