From 22c9349b5ddc6b80d6b36f345777a9cbae2ed670 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller-moko@noreply.git.mokoconsulting.tech>
Date: Sat, 30 May 2026 10:46:24 -0500
Subject: [PATCH] feat: pause/resume videos when hero scrolls out of viewport

Use IntersectionObserver to pause videos when the hero is not visible
and resume when it scrolls back in. Supports native <video>, YouTube
(postMessage API with enablejsapi=1), and Vimeo embeds.

Authored-by: Moko Consulting
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/media/js/mod_mokojoomhero.js | 46 ++++++++++++++++++++++++++++++++
 src/tmpl/default.php             |  2 +-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/media/js/mod_mokojoomhero.js b/src/media/js/mod_mokojoomhero.js
index d374628..43ed745 100644
--- a/src/media/js/mod_mokojoomhero.js
+++ b/src/media/js/mod_mokojoomhero.js
@@ -20,6 +20,7 @@ document.addEventListener('DOMContentLoaded', function () {
 		return;
 	}
 
+	// ── Image slideshow ──
 	document.querySelectorAll('.mokojoomhero[data-slides]').forEach(function (hero) {
 		var slides   = hero.querySelectorAll('.mokojoomhero__slide');
 		var interval = parseInt(hero.dataset.interval, 10) || 5000;
@@ -39,4 +40,49 @@ document.addEventListener('DOMContentLoaded', function () {
 			slides[current].setAttribute('aria-hidden', 'false');
 		}, interval);
 	});
+
+	// ── Pause/resume videos when out of viewport ──
+	if (!('IntersectionObserver' in window)) {
+		return;
+	}
+
+	var observer = new IntersectionObserver(function (entries) {
+		entries.forEach(function (entry) {
+			var hero  = entry.target;
+			var video = hero.querySelector('video.mokojoomhero__video');
+			var iframe = hero.querySelector('iframe.mokojoomhero__video');
+
+			if (entry.isIntersecting) {
+				// Resume
+				if (video) {
+					video.play();
+				}
+				if (iframe) {
+					var src = iframe.src || '';
+					if (src.indexOf('youtube') !== -1) {
+						iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
+					} else if (src.indexOf('vimeo') !== -1) {
+						iframe.contentWindow.postMessage('{"method":"play"}', '*');
+					}
+				}
+			} else {
+				// Pause
+				if (video) {
+					video.pause();
+				}
+				if (iframe) {
+					var src = iframe.src || '';
+					if (src.indexOf('youtube') !== -1) {
+						iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+					} else if (src.indexOf('vimeo') !== -1) {
+						iframe.contentWindow.postMessage('{"method":"pause"}', '*');
+					}
+				}
+			}
+		});
+	}, { threshold: 0.1 });
+
+	document.querySelectorAll('.mokojoomhero').forEach(function (hero) {
+		observer.observe(hero);
+	});
 });
diff --git a/src/tmpl/default.php b/src/tmpl/default.php
index 62879d4..2d8d3fa 100644
--- a/src/tmpl/default.php
+++ b/src/tmpl/default.php
@@ -45,7 +45,7 @@ $heightAttr = htmlspecialchars($heroHeight, ENT_QUOTES, 'UTF-8');
 >
 	<?php // Background layer — single image, slideshow, or video ?>
 	<?php if ($heroMode === 'video' && $youtubeId) : ?>
-		<iframe class="mokojoomhero__video" src="https://www.youtube-nocookie.com/embed/<?php echo htmlspecialchars($youtubeId, ENT_QUOTES, 'UTF-8'); ?>?autoplay=1&mute=1&loop=1&playlist=<?php echo htmlspecialchars($youtubeId, ENT_QUOTES, 'UTF-8'); ?>&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+		<iframe class="mokojoomhero__video" src="https://www.youtube-nocookie.com/embed/<?php echo htmlspecialchars($youtubeId, ENT_QUOTES, 'UTF-8'); ?>?autoplay=1&mute=1&loop=1&playlist=<?php echo htmlspecialchars($youtubeId, ENT_QUOTES, 'UTF-8'); ?>&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1&enablejsapi=1&origin=<?php echo htmlspecialchars(\Joomla\CMS\Uri\Uri::root(), ENT_QUOTES, 'UTF-8'); ?>" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 	<?php elseif ($heroMode === 'video' && $vimeoId) : ?>
 		<iframe class="mokojoomhero__video" src="https://player.vimeo.com/video/<?php echo htmlspecialchars($vimeoId, ENT_QUOTES, 'UTF-8'); ?>?autoplay=1&muted=1&loop=1&background=1" allow="autoplay" allowfullscreen></iframe>
 	<?php elseif ($heroMode === 'video' && $videoUrl) : ?>