https://www.redfunnel.co.uk/themes/custom/redfunnel/assets/js/video-lazy-load.js?tm8hpl

1(function ($, Drupal, once) {
2  'use strict';
3
4  /**
5   * Lazy load local videos using Intersection Observer
6   *
7   * This behavior handles HTML5 <video> elements with preload="none"
8   * Videos are loaded when they come into the viewport
9   */
10  Drupal.behaviors.videoLazyLoad = {
11    attach: function (context, settings) {
12
13      // Check for Intersection Observer support
14      if (!('IntersectionObserver' in window)) {
15        // Fallback: load all videos immediately if no support
16        this.loadAllVideos(context);
17        return;
18      }
19
20      // Create observer for lazy loading
21      const lazyVideoObserver = new IntersectionObserver((entries, observer) => {
22        entries.forEach(entry => {
23          if (entry.isIntersecting) {
24            const videoElement = entry.target;
25
26            // Load the video
27            this.loadLocalVideo(videoElement);
28
29            // Stop observing once loaded
30            observer.unobserve(videoElement);
31          }
32        });
33      }, {
34        // Load video when 10% visible
35        rootMargin: '50px 0px',
36        threshold: 0.1
37      });
38
39      // Observe all lazy local videos
40      once('lazyVideoLocal', '.lazy-video', context).forEach(video => {
41        lazyVideoObserver.observe(video);
42      });
43    },
44
45    /**
46     * Load local HTML5 video
47     * The source elements already have src attributes, we just need to trigger load
48     */
49    loadLocalVideo: function(videoElement) {
50      const sources = videoElement.querySelectorAll('source');
51
52      // Check if sources have src attributes (they should from the template)
53      const hasSources = Array.from(sources).some(source => source.hasAttribute('src'));
54
55      if (hasSources) {
56        // Load the video - this will start downloading the video file
57        videoElement.load();
58        videoElement.classList.remove('lazy-video');
59        videoElement.classList.add('lazy-video-loaded');
60
61        console.log('Local video loaded:', videoElement);
62      } else {
63        console.warn('Local video has no source with src attribute:', videoElement);
64      }
65    },
66
67    /**
68     * Fallback: load all videos immediately (no Intersection Observer support)
69     */
70    loadAllVideos: function(context) {
71      // Load all local videos
72      const localVideos = context.querySelectorAll('.lazy-video');
73      localVideos.forEach(video => {
74        this.loadLocalVideo(video);
75      });
76
77      console.warn('Intersection Observer not supported. All videos loaded immediately.');
78    }
79  };
80
81})(jQuery, Drupal, once);