handle videos for mobile

Netcentric · Dec 2, 2024 · bc1741a · bc1741a
1 parent 5600b11
commit bc1741a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -30,7 +30,9 @@ main .hero-container .hero-wrapper {
   background-color: var(--black);
 }
 
-.hero.hero-multiple-images > div > div picture:first-of-type {
+.hero.hero-multiple-images > div > div picture:first-of-type,
+.hero-multiple-videos .video-wrapper:first-of-type,
+.hero-multiple-videos .hero-pause-button:first-of-type {
   display: none;
 }
 
@@ -103,6 +105,10 @@ main .hero-container .hero-wrapper {
   border-radius: 50%;
 }
 
+.hero-multiple-videos .hero-pause-button:nth-of-type(2) {
+  top: calc(var(--nav-height) + 60px);
+}
+
 .hero .hero-scroll-icon {
   position: absolute;
   left: 50%;
@@ -179,14 +185,21 @@ main .hero-container .hero-wrapper {
 }
 
 @media (width >= 768px) {
-  .hero.hero-multiple-images > div > div picture:first-of-type {
+  .hero.hero-multiple-images > div > div picture:first-of-type,
+  .hero-multiple-videos .video-wrapper:first-of-type {
     display: block;
   }
 
-  .hero.hero-multiple-images > div > div picture:nth-of-type(2) {
+  .hero.hero-multiple-images > div > div picture:nth-of-type(2),
+  .hero-multiple-videos .video-wrapper:nth-of-type(2),
+  .hero-multiple-videos .hero-pause-button:nth-of-type(2) {
     display: none;
   }
 
+  .hero-multiple-videos .hero-pause-button:first-of-type {
+    display: flex;
+  }
+
   .hero .hero-text-wrapper {
     max-width: 475px;
     text-align: left;

diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
@@ -1,19 +1,18 @@
 import { createOptimizedPicture } from '../../scripts/aem.js';
 import { customDecoreateIcons, getTextLabel } from '../../scripts/scripts.js';
 
-const addPauseButton = (block) => {
+const addPauseButton = (video, block, id) => {
   const pauseButton = document.createElement('button');
   pauseButton.classList.add('hero-pause-button');
   pauseButton.setAttribute('aria-label', getTextLabel('pause'));
+  pauseButton.setAttribute('id', id);
   pauseButton.innerHTML = `
     <span class="icon icon-pause"></span>
     <span class="icon icon-play hidden"></span>
   `;
 
   pauseButton.addEventListener('click', () => {
-    const video = block.querySelector('video');
     const [pauseIcon, playIcon] = pauseButton.querySelectorAll('span');
-
     if (video.paused) {
       video.play();
       pauseIcon.classList.remove('hidden');
@@ -138,7 +137,7 @@ const startCountdown = (block, eventDate) => {
 export default function decorate(block) {
   const firstCell = block.querySelector(':scope > div > div');
   const [picture, xsPicture] = firstCell.querySelectorAll('picture');
-  const video = firstCell.querySelector('video');
+  const videos = firstCell.querySelectorAll('video');
   const headings = firstCell.querySelectorAll('h1, h2, h3, h4, h5, h6');
   const links = firstCell.querySelectorAll('a');
   const dateEl = block.querySelector(':scope > div:nth-child(2) > div');
@@ -156,10 +155,14 @@ export default function decorate(block) {
     block.classList.add('hero-multiple-images');
   }
 
-  if (video) {
+  videos.forEach((video, index) => {
     video.parentElement.classList.add('video-wrapper');
-    addPauseButton(block);
-  }
+    addPauseButton(video, block, `video-${index}`);
+
+    if (index > 0) {
+      block.classList.add('hero-multiple-videos');
+    }
+  });
 
   const textWrapper = document.createElement('div');
   textWrapper.classList.add('hero-text-wrapper', 'dark');