// Client-side geo-detection + state -> video switcher // NOTE: This uses a public IP geolocation endpoint (ipapi.co). That keeps everything client-side. // If you later want server-side geolocation, we can add an endpoint that returns the visitor state. (function(){ // Map state codes to video URLs + posters. Replace these placeholders with your real per-state videos. var stateVideoMap = { ‘UT’: { src: ‘https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4’, poster: ‘https://placehold.co/1200×605?text=Utah’ }, ‘CA’: { src: ‘https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4’, poster: ‘https://placehold.co/1200×605?text=California’ }, ‘TX’: { src: ‘https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4’, poster: ‘https://placehold.co/1200×605?text=Texas’ } }; function setVideoForState(stateKey){ var videoEl = document.getElementById(‘hero-state-video’); if(!videoEl) return; var mapping = stateVideoMap[stateKey]; if(!mapping) return; try{ // Pause, swap source, update poster, reload, then attempt play videoEl.pause(); var source = videoEl.querySelector(‘source’); if(source){ source.src = mapping.src; } else { videoEl.src = mapping.src; } videoEl.poster = mapping.poster; videoEl.load(); // Try to play; browsers may prevent autoplay with audio — video is muted so most will allow it videoEl.play().catch(function(){ /* play prevented; will play after user interaction */ }); } catch(e){ console.warn(‘Video swap failed’, e); } } // Wire up click handlers on any .state-button links (they should include data-state). Keeps current behavior. document.addEventListener(‘click’, function(e){ var target = e.target; var btn = target.closest && target.closest(‘.state-button a’); if(!btn) return; var state = (btn.getAttribute(‘data-state’) || btn.textContent || ”).trim(); if(state && stateVideoMap[state]){ e.preventDefault(); document.querySelectorAll(‘.state-button’).forEach(function(wrapper){ wrapper.classList.remove(‘is-active’); }); var parent = btn.closest(‘.state-button’); if(parent) parent.classList.add(‘is-active’); setVideoForState(state); } }, false); // Attempt client-side IP geolocation to detect U.S. state. Falls back to UT. function detectStateByIPAndSetVideo(){ // Lightweight public endpoint. For production use, consider a paid provider or server-side lookup for reliability & privacy. var endpoint = ‘https://ipapi.co/json/’; fetch(endpoint, {cache: ‘no-store’}) .then(function(r){ if(!r.ok) throw new Error(‘Geo lookup failed’); return r.json(); }) .then(function(data){ // ipapi returns region_code (e.g., ‘UT’) for U.S. states or region (may vary by provider) var region = (data && (data.region_code || data.region)) ? (data.region_code || data.region) : null; if(region){ region = region.toUpperCase(); if(stateVideoMap[region]){ // Mark the correct button active if present var activeBtn = document.querySelector(‘.state-button a[data-state=”‘ + region + ‘”]’); if(activeBtn){ document.querySelectorAll(‘.state-button’).forEach(function(wrapper){ wrapper.classList.remove(‘is-active’); }); var parent = activeBtn.closest(‘.state-button’); if(parent) parent.classList.add(‘is-active’); } setVideoForState(region); return; } } // fallback to UT setVideoForState(‘UT’); }) .catch(function(){ // On any error, default to UT setVideoForState(‘UT’); }); } // On DOM ready, run detection document.addEventListener(‘DOMContentLoaded’, function(){ detectStateByIPAndSetVideo(); }); })();