MokoConsulting/MokoJoomHero
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases 1 Wiki Activity

feat: pause/resume videos when hero scrolls out of viewport
Generic: Repo Health / Site Health (push) Has been cancelled
Details
Generic: Repo Health / Access control (push) Has been cancelled
Details
Universal: Auto Version Bump / Version Bump (push) Has been cancelled
Details
Update Server / Update Server (push) Has been cancelled
Details
Generic: Repo Health / Release configuration (push) Has been cancelled
Details
Generic: Repo Health / Scripts governance (push) Has been cancelled
Details
Generic: Repo Health / Repository health (push) Has been cancelled
Details

Browse Source 
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>
This commit is contained in:
Jonathan Miller
2026-05-30 10:46:24 -05:00
parent 6132725665
commit 22c9349b5d
2 changed files with 47 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tmpl/default.php
+1 -1
View File
@@ -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) : ?>