diff --git a/libs/blocks/how-to/how-to.css b/libs/blocks/how-to/how-to.css index 856b713e005..4f9861d3ad7 100644 --- a/libs/blocks/how-to/how-to.css +++ b/libs/blocks/how-to/how-to.css @@ -4,6 +4,7 @@ padding: var(--spacing-xxl) 0; display: grid; grid-template-rows: 1fr; + align-items: center; grid-template-areas: "heading" "list" @@ -59,6 +60,10 @@ html[dir="rtl"] .how-to ol > li::before { order: 3; } +.how-to-media.how-to-media-large.video { + justify-self: auto; +} + .how-to-media-large { height: auto; min-height: auto; @@ -109,11 +114,12 @@ html[dir="rtl"] .how-to ol > li::before { /* Desktop video */ @media screen and (min-width: 1200px) { .how-to .foreground.has-video { - column-gap: var(--spacing-m); + column-gap: 48px; grid-template-rows: 1fr; + grid-auto-rows: min-content; grid-template-areas: "heading heading" - "list list" + "list image"; } .how-to.large-image .foreground.has-video, @@ -122,6 +128,10 @@ html[dir="rtl"] .how-to ol > li::before { grid-auto-rows: min-content; grid-template-areas: "heading heading" - "list image" + "list image"; + } + + .how-to-media.how-to-media-large.video { + width: 588px; } } diff --git a/libs/blocks/how-to/how-to.js b/libs/blocks/how-to/how-to.js index acf282ae5c8..9edf948b95b 100644 --- a/libs/blocks/how-to/how-to.js +++ b/libs/blocks/how-to/how-to.js @@ -47,7 +47,19 @@ const setJsonLd = (heading, description, mainImage, stepsLd) => { }; const getImage = (el) => el.querySelector('picture') || el.querySelector('a[href$=".svg"'); -const getVideo = (el) => el.querySelector('a[href*=".mp4"]'); +const getVideo = (el) => { + const video = el.querySelector('video'); + if (video) { + const src = video.getAttribute('data-video-source'); + video.appendChild(createTag('source', { src, type: 'video/mp4' })); + return video; + } + const adobeTV = el.querySelector('.milo-video'); + if (adobeTV) { + return adobeTV; + } + return null; +}; const getHowToInfo = (el) => { const infoDiv = el.querySelector(':scope > div > div'); @@ -133,7 +145,7 @@ export default function init(el) { } if (mainVideo) { - const videoClass = `how-to-media${isLargeMedia ? ' how-to-media-large' : ''}`; + const videoClass = `how-to-media${isLargeMedia ? ' how-to-media-large video' : ''}`; el.append(createTag('div', { class: videoClass }, mainVideo)); } diff --git a/test/blocks/how-to/how-to.test.js b/test/blocks/how-to/how-to.test.js index 16f2372a4f2..6cc12a17dc0 100644 --- a/test/blocks/how-to/how-to.test.js +++ b/test/blocks/how-to/how-to.test.js @@ -1,5 +1,6 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; +import { delay, waitForElement } from '../../helpers/waitfor.js'; document.body.innerHTML = await readFile({ path: './mocks/body.html' }); const { default: init } = await import('../../../libs/blocks/how-to/how-to.js'); @@ -99,10 +100,13 @@ describe('How To', () => { expect(howToList).to.exist; }); - it('Renders a video', async () => { - const howTo = document.querySelector('#test5'); + it('Renders a AdobeTV video', async () => { + const howTo = document.getElementById('test5'); + const { default: adobeTV } = await import('../../../libs/blocks/adobetv/adobetv.js'); + adobeTV(howTo.querySelector('a')); + await delay(); init(howTo); - const howToList = document.querySelector('#test5 a'); - expect(howToList).to.exist; + const iframe = howTo.querySelector('iframe'); + expect(iframe).to.exist; }); }); diff --git a/test/blocks/how-to/mocks/body.html b/test/blocks/how-to/mocks/body.html index 0c2acc0908e..57f465cece4 100644 --- a/test/blocks/how-to/mocks/body.html +++ b/test/blocks/how-to/mocks/body.html @@ -70,7 +70,7 @@
Download your new file.
Follow these easy steps to compress a large PDF file online:
- -Follow these easy steps to compress a large PDF file online:
+