https://www.betterbrain.com/marketing-integrations/027dad4efdf7.js

1
2/* -------- tiny loader for the Vimeo API (only once) -------- */
3let __vimeoAPILoading, __vimeoAPIReady;
4function loadVimeoAPI(){
5  if (window.Vimeo && window.Vimeo.Player) return Promise.resolve();
6  if (__vimeoAPIReady) return __vimeoAPIReady;
7  if (!__vimeoAPILoading){
8    __vimeoAPILoading = document.createElement('script');
9    __vimeoAPILoading.src = 'https://player.vimeo.com/api/player.js';
10    __vimeoAPILoading.async = true;
11    document.head.appendChild(__vimeoAPILoading);
12  }
13  __vimeoAPIReady = new Promise(res=>{
14    __vimeoAPILoading.onload = () => res();
15  });
16  return __vimeoAPIReady;
17}
18
19/* -------- global registry so you can pause on slide change -------- */
20const allVideoPlayers = new Map();
21
22/* Create/init a single player on demand (first click) */
23async function ensureVimeoPlayer(vimeoElement){
24  if (allVideoPlayers.has(vimeoElement)) return allVideoPlayers.get(vimeoElement);
25
26  // Load the API only now
27  await loadVimeoAPI();
28
29  // Create iframe only when needed
30  let iframe = vimeoElement.querySelector('iframe.vimeo-player__iframe');
31  if (!iframe){
32    iframe = document.createElement('iframe');
33    iframe.className = 'vimeo-player__iframe';
34    iframe.setAttribute('allowfullscreen', 'true');
35    iframe.setAttribute('allow', 'autoplay; encrypted-media');
36    iframe.setAttribute('frameborder', '0');
37    iframe.style.width = '100%';
38    iframe.style.height = '100%';
39    iframe.style.border = '0';
40    iframe.style.aspectRatio = '16/9';
41    vimeoElement.appendChild(iframe);
42  }
43
44  const id = vimeoElement.getAttribute('data-vimeo-video-id');
45  const src = `https://player.vimeo.com/video/${id}?api=1&background=1&autoplay=0&loop=0&muted=1`;
46  iframe.src = src;
47
48  // Use the element id or make one
49  if (!vimeoElement.id) vimeoElement.id = 'vimeo-player-' + Math.random().toString(36).slice(2);
50  const player = new Vimeo.Player(vimeoElement.id);
51
52  // Wire up state → attributes (so your CSS continues to work)
53  player.on('play',  () => {
54    vimeoElement.setAttribute('data-vimeo-loaded','true');
55    vimeoElement.setAttribute('data-vimeo-playing','true');
56    vimeoElement.setAttribute('data-vimeo-activated','true'); // ensure pause button appears
57  });
58  player.on('pause', () => {
59    vimeoElement.setAttribute('data-vimeo-playing','false');
60    vimeoElement.setAttribute('data-vimeo-activated','false'); // ensure play button appears
61  });
62  player.on('ended', () => {
63    vimeoElement.setAttribute('data-vimeo-activated','false');
64    vimeoElement.setAttribute('data-vimeo-playing','false');
65    player.unload();
66  });
67
68  allVideoPlayers.set(vimeoElement, player);
69  return player;
70}
71
72/* Pause every non-active slide's video (keeps your original behavior) */
73function pauseInactiveVimeoVideos() {
74  document.querySelectorAll('[data-vimeo-slider="slide"]').forEach(sli

74de=>{
75    const el = slide.querySelector('[data-vimeo-player-init]');
76    if (!el) return;
77    const player = allVideoPlayers.get(el);
78    if (player && !slide.classList.contains('active')){
79      player.pause();
80      el.setAttribute('data-vimeo-playing','false');
81      el.setAttribute('data-vimeo-activated','false');
82    }
83  });
84}
85
86/* Delegated clicks: PLAY and PAUSE */
87document.addEventListener('click', async (e) => {
88  // PLAY
89  const playBtn = e.target.closest('[data-vimeo-control="play"]');
90  if (playBtn) {
91    const vimeoElement = playBtn.closest('[data-vimeo-player-init]');
92    if (!vimeoElement) return;
93
94    const player = await ensureVimeoPlayer(vimeoElement);
95
96    const muted = vimeoElement.getAttribute('data-vimeo-muted') === 'true';
97    await player.setVolume(muted ? 0 : 1);
98
99    const slide = vimeoElement.closest('[data-vimeo-slider="slide"]');
100    if (!slide || slide.classList.contains('active')) {
101      player.play();
102    }
103
104    pauseInactiveVimeoVideos();
105    return;
106  }
107
108  // PAUSE
109  const pauseBtn = e.target.closest('[data-vimeo-control="pause"]');
110  if (pauseBtn) {
111    const vimeoElement = pauseBtn.closest('[data-vimeo-player-init]');
112    if (!vimeoElement) return;
113
114    const player = allVideoPlayers.get(vimeoElement);
115    if (player) {
116      player.pause();
117      vimeoElement.setAttribute('data-vimeo-playing', 'false');
118      vimeoElement.setAttribute('data-vimeo-activated', 'false'); // restore play button
119    }
120  }
121});