Home

document.addEventListener('DOMContentLoaded', function () { const hero = document.getElementById('hero'); if (!hero) return; // pick desktop vs mobile source by viewport (also fallback to desktop if mobile missing) const isPhone = window.matchMedia('(max-width: 767px)').matches; const srcWrap = document.getElementById(isPhone ? 'heroVideoSrcMobile' : 'heroVideoSrc') || document.getElementById('heroVideoSrc') || document.getElementById('heroVideoSrcMobile'); if (!srcWrap) return; // Elementor self-hosted video element inside the widget const vid = srcWrap.querySelector('video, .elementor-video'); if (!vid) return; // prepare hero to host bg if (getComputedStyle(hero).position === 'static') hero.style.position = 'relative'; // bg layer const bg = document.createElement('div'); bg.id = 'heroBgWrap'; Object.assign(bg.style, { position:'absolute', inset:'0', zIndex:'0', overflow:'hidden' }); // configure video vid.removeAttribute('controls'); vid.setAttribute('playsinline',''); vid.setAttribute('muted',''); // autoplay policy vid.setAttribute('autoplay',''); vid.setAttribute('loop',''); Object.assign(vid.style, { width:'100%', height:'100%', objectFit:'cover' }); // move into hero, hide both source widgets (if both exist) bg.appendChild(vid); hero.prepend(bg); const srcDesk = document.getElementById('heroVideoSrc'); const srcMob = document.getElementById('heroVideoSrcMobile'); if (srcDesk) srcDesk.style.display = 'none'; if (srcMob) srcMob.style.display = 'none'; // ====== Sound toggle (mute/unmute only) ====== const PREF_KEY = 'heroSoundPref'; // 'on'|'off' const preferOn = (localStorage.getItem(PREF_KEY) || 'on') === 'on'; let armed = true; function safePlay(){ vid.play().catch(()=>{}); } function updateUI(){ btn.textContent = vid.muted ? '🔇 Sound Off' : '🔊 Sound On'; btn.setAttribute('aria-pressed', vid.muted ? 'false' : 'true'); } const btn = document.createElement('button'); btn.id = 'soundToggle'; btn.className = 'sound-btn'; btn.type = 'button'; hero.appendChild(btn); function firstGesture(){ if (!armed) return; armed = false; if (preferOn) { vid.muted = false; safePlay(); updateUI(); } } ['pointerdown','touchstart','keydown','wheel'].forEach(evt=>{ window.addEventListener(evt, firstGesture, { once:true, passive:true }); }); btn.addEventListener('click', async ()=>{ await safePlay(); vid.muted = !vid.muted; localStorage.setItem(PREF_KEY, vid.muted ? 'off' : 'on'); updateUI(); }); // start vid.muted = true; // required for autoplay safePlay(); updateUI(); // handle orientation/resize (optional): no swap, just keep cover fit window.addEventListener('resize', ()=> { // object-fit: cover handles it; keep simple }, { passive:true }); });