https://www.fireblocks.com/wp-content/themes/fireblocks-block-theme/src/js/video-modal.js?ver=1.1.0

1/**
2 * Site-wide video modal — plays either a Wistia or a YouTube embed depending
3 * on which platform fireblocks_resolve_story_video() (PHP) detected for a
4 * given `video_url`. Any element anywhere on the page can trigger it via:
5 *
6 *   <button data-video-trigger data-video-platform="wistia|youtube" data-video-id="...">
7 *
8 * Used by fireblocks/customer-story-hero and fireblocks/customer-story-card.
9 * A single shared modal (rather than one per block) since it's the same
10 * piece of global page UI regardless of which block/story triggers it, and
11 * only one can ever be open at a time.
12 */
13( function () {
14	function embedUrl( platform, id ) {
15		if ( 'youtube' === platform ) {
16			return 'https://www.youtube-nocookie.com/embed/' + encodeURIComponent( id ) + '?autoplay=1&rel=0';
17		}
18		if ( 'wistia' === platform ) {
19			return 'https://fast.wistia.net/embed/iframe/' + encodeURIComponent( id ) + '?videoFoam=true&autoPlay=true';
20		}
21		return '';
22	}
23
24	function buildModal() {
25		var overlay = document.createElement( 'div' );
26		overlay.className = 'fb-video-modal';
27		overlay.hidden = true;
28		overlay.setAttribute( 'role', 'dialog' );
29		overlay.setAttribute( 'aria-modal', 'true' );
30		overlay.setAttribute( 'aria-label', 'Video player' );
31
32		overlay.innerHTML =
33			'<div class="fb-video-modal__backdrop" data-video-modal-close></div>' +
34			'<div class="fb-video-modal__dialog">' +
35				'<button type="button" class="fb-video-modal__close" data-video-modal-close aria-label="Close video">' +
36					'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>' +
37				'</button>' +
38				'<div class="fb-video-modal__frame">' +
39					'<iframe class="fb-video-modal__iframe" src="" title="Video player" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>' +
40				'</div>' +
41			'</div>';
42
43		document.body.appendChild( overlay );
44		return overlay;
45	}
46
47	document.addEventListener( 'DOMContentLoaded', function () {
48		var modal = null;
49		var lastTrigger = null;
50
51		function openModal( platform, id ) {
52			var src = embedUrl( platform, id );
53			if ( ! src ) {
54				return;
55			}
56
57			if ( ! modal ) {
58				modal = buildModal();
59			}
60
61			modal.querySelector( '.fb-video-modal__iframe' ).src = src;
62			modal.hidden = false;
63			document.body.classList.add( 'fb-video-modal-open' );
64			modal.querySelector( '.fb-video-modal__close' ).focus();
65		}
66
67		function closeModal() {
68			if ( ! modal || modal.hidden ) {
69				return;
70			}
71
72			modal.hidden = true;
73			modal.querySelector( '.fb-video-modal__iframe' ).src = ''; // stops playback
74			document.body.classList.remove( 'fb-video-modal-open' );
75
76			if ( lastTrigger ) {
77				lastTrigger.focus();
78			}
79		}
80
81		document.addEventListener( 'click', function ( event ) {
82			var trigger = event.target.closest( '[data-video-trigger]' );
83			if ( trigger ) {
84				event.preventDefault();
85				lastTrigger = trigger;
86				openModal( trigger.getAttribute( 'data-video-platform' ), trigger.getAttribute( 'data-video-id' ) );
87				return;
88			}
89
90			if ( event.target.closest( '[data-video-modal-close]' ) ) {
91				closeModal();
92			}
93		} );
94
95		document.addEventListener( 'keydown', function ( event ) {
96			if ( 'Escape' === event.key ) {
97				closeModal();
98			}
99		} );
100	} );
101} )();