https://essembi.com/hero-video.uxal9cjufs.js

1(() => {
2    // Controls for autoplaying hero videos ([data-hero-video], e.g. the
3    // /scheduling hero). Everything is delegated on document — including
4    // the media events, caught in the capture phase since they don't
5    // bubble — so it keeps working across Blazor's enhanced/interactive
6    // navigation without re-initialising per page.
7    if (window.__essembiHeroVideoInit) return;
8    window.__essembiHeroVideoInit = true;
9
10    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
11
12    const sync = (video) => {
13        const wrap = video.closest('[data-hero-video]');
14        const toggle = wrap && wrap.querySelector('[data-hero-video-toggle]');
15        if (!toggle) return;
16        toggle.setAttribute('aria-label', video.paused ? 'Play video' : 'Pause video');
17        toggle.querySelector('i').className = video.paused ? 'bi bi-play-fill' : 'bi bi-pause-fill';
18    };
19
20    const inHero = (target) => target instanceof HTMLVideoElement && target.closest('[data-hero-video]');
21
22    // Honour reduced motion: stop the autoplay (the poster frame stays up)
23    // unless the visitor pressed play themselves.
24    document.addEventListener('play', (event) => {
25        const video = event.target;
26        if (!inHero(video)) return;
27        if (reducedMotion.matches && !video.dataset.userPlayed) {
28            video.pause();
29        }
30        sync(video);
31    }, true);
32
33    document.addEventListener('pause', (event) => {
34        if (inHero(event.target)) sync(event.target);
35    }, true);
36
37    document.addEventListener('click', (event) => {
38        const toggle = event.target.closest('[data-hero-video-toggle]');
39        const expand = event.target.closest('[data-hero-video-expand]');
40        if (!toggle && !expand) return;
41
42        const video = event.target.closest('[data-hero-video]').querySelector('video');
43
44        if (toggle) {
45            if (video.paused) {
46                video.dataset.userPlayed = 'true';
47                video.play();
48            } else {
49                video.pause();
50            }
51            return;
52        }
53
54        // iOS Safari only supports full screen on the video element via
55        // its own webkit API (which opens the native player).
56        if (video.requestFullscreen) {
57            video.requestFullscreen().catch(() => video.webkitEnterFullscreen?.());
58        } else if (video.webkitEnterFullscreen) {
59            video.webkitEnterFullscreen();
60        }
61        if (video.paused) video.play();
62    });
63})();