/* ====== BASIS HERO ====== */ .ab-hero{ position: relative; width: 100%; min-height: 80vh; overflow: hidden; margin: 0; padding: 0; } @media (max-width: 767px){ .ab-hero{ min-height: 100vh; } } @supports (min-height: 100dvh){ @media (max-width: 767px){ .ab-hero{ min-height: 100dvh; } } } /* Videolaag + extra CSS-background fallback */ .ab-video-layer{ position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #000; } .ab-video-layer::before{ content:""; position:absolute; inset:0; background: url("https://amicibeach.com/wp-content/uploads/2025/06/Screen_Amici-scaled.png") center/cover no-repeat; z-index: 0; } /* Fallback : echte cover + fade */ .ab-fallback{ position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; transition: opacity .5s ease; opacity: 1; z-index: 1; } .ab-fallback.is-hidden{ opacity: 0; } /* Videobox → altijd cover */ #abVideoBox{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); will-change: width, height, transform; z-index: 2; } /* Plyr: iframe vullen + controls uit */ .ab-video-layer .plyr{ width: 100%; height: 100%; } .ab-video-layer .plyr__video-embed{ position: static; padding: 0; height: 100%; } .ab-video-layer .plyr__video-embed iframe{ position: static; width: 100%; height: 100%; } /* Verberg klikbaarheid van uploader/profielfoto + YouTube-logo */ .ab-video-layer .plyr__video-embed iframe { pointer-events: none !important; } .ab-video-layer .plyr__controls{ display: none !important; } /* Content boven video */ .ab-hero-content{ position: relative; z-index: 3; display: grid; place-items: center; min-height: inherit; padding: 2rem; text-align: center; } /* H1 alleen op mobiel zichtbaar */ .hero-title-mobile{ margin: 0; font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.1; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); display: none; } @media (max-width: 767px){ .hero-title-mobile{ display: block; } } (function(){ const HERO_ID = 'homeTestHero'; const BOX_ID = 'abVideoBox'; const PLYR_SEL = '#plyrHero'; const ASPECT = 16/9; let player, inited = false; const hero = document.getElementById(HERO_ID); const box = document.getElementById(BOX_ID); const fallback = document.getElementById('abFallback'); function sizeCoverBox(){ if(!hero || !box) return; const w = Math.max(1, hero.clientWidth); const h = Math.max(1, hero.clientHeight); const ar = w / h; let bw, bh; if (ar > ASPECT) { bw = w; bh = w / ASPECT; } else { bh = h; bw = h * ASPECT; } box.style.width = bw + 'px'; box.style.height = bh + 'px'; } function hideFallback(){ if (fallback) fallback.classList.add('is-hidden'); } function showFallback(){ if (fallback) fallback.classList.remove('is-hidden'); } function initPlyr(){ if (inited || typeof Plyr === 'undefined') return; sizeCoverBox(); player = new Plyr(PLYR_SEL, { autoplay: true, muted: true, loop: { active: true }, controls: [], clickToPlay: false, keyboard: { focused: false, global: false }, youtube: { rel: 0, modestbranding: 1, playsinline: 1 } }); inited = true; player.once('ready', () => { try { player.muted = true; player.play(); } catch(e){}; }); player.on('playing', hideFallback); player.on('pause', () => { try { player.play(); } catch(e){}; }); player.on('ended', () => { try { player.play(); } catch(e){}; }); player.on('error', showFallback); } function startAfterConsent(){ setTimeout(initPlyr, 350); } const ro = window.ResizeObserver ? new ResizeObserver(sizeCoverBox) : null; if (ro && hero) ro.observe(hero); ['load','resize','orientationchange'].forEach(ev => window.addEventListener(ev, sizeCoverBox)); document.addEventListener('cmplz_status_change', startAfterConsent); document.addEventListener('cmplz_enable_category', startAfterConsent); document.addEventListener('cmplz_cookie_warning_loaded', startAfterConsent); window.addEventListener('DOMContentLoaded', startAfterConsent); })();