diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 58dd084..1484ca0 100644 --- 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 index f19e9fd..ef0a3bf 100644 --- 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 = ` `; 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');