https://careers.ccs.spokane.edu/assets/sites/controllers/blocks/carousel/video_block_controller-afb20fe4.js

1import {Controller} from '@hotwired/stimulus'
2import videojs from 'video.js'
3
4// If this works out, we could consider moving it to all videos and disconnecting it from carousels
5export default class extends Controller {
6  initialize() {
7    /*
8    * This is creating one observer, per carousel item block of type video. (n=1)
9    * If the div is hidden, find the video and pause it
10    * Docs: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
11    * */
12    this.observer = new IntersectionObserver((entries) => {
13      for (const entry of entries) {
14        if (!entry.isIntersecting) {
15          const videoElement = this.element.querySelector('.clinch-video-player')
16          if (videoElement) {
17            videojs(videoElement).pause()
18          }
19        }
20      }
21    }, {})
22  }
23
24  connect() {
25    this.observer.observe(this.element)
26  }
27
28  disconnect() {
29    this.observer.disconnect()
30  }
31}