https://hoppsyrobot.com/scripts/observe.js

1document.addEventListener('DOMContentLoaded', () => {
2	const targets = document.querySelectorAll('.featuresList-card__video');
3	const lazyVideos = document.querySelectorAll('.lazy-video');
4
5	lazyVideos.forEach((video) => {
6		const observer = new IntersectionObserver(
7			(entries, observerInstance) => {
8				entries.forEach((entry) => {
9					if (entry.isIntersecting) {
10						const source = video.querySelector('source');
11						if (source) {
12							source.src = source.dataset.src;
13							source.removeAttribute('data-src');
14							video.load();
15							video.play();
16						}
17						observerInstance.unobserve(video);
18					}
19				});
20			},
21			{
22				rootMargin: '300px',
23			}
24		);
25
26		observer.observe(video);
27	});
28
29	targets.forEach((target) => {
30		const observer = new IntersectionObserver(
31			(entries, observerInstance) => {
32				entries.forEach((entry) => {
33					if (entry.isIntersecting) {
34						renderIframe(target);
35						observerInstance.unobserve(target);
36					}
37				});
38			},
39			{
40				rootMargin: '300px',
41			}
42		);
43
44		observer.observe(target);
45	});
46
47	function renderIframe(target) {
48		const videoId = target.getAttribute('data-video-id');
49		if (!videoId) return;
50
51		const iframe = document.createElement('iframe');
52		iframe.title = 'Embedded Video';
53		iframe.className = 'content__image-video';
54		iframe.src = `https://iframe.videodelivery.net/${videoId}/iframe?controls=false&muted=true&autoplay=true&loop=true&preload=true`;
55		iframe.style = 'position:absolute;height: 100%; width: 100%; ';
56		iframe.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
57		iframe.allowFullscreen = true;
58
59		target.appendChild(iframe);
60	}
61});