diff --git a/plugins/aem-assets-plugin/blocks/video/video.css b/plugins/aem-assets-plugin/blocks/video/video.css index b6c6f26cb..b0c2bb79b 100644 --- a/plugins/aem-assets-plugin/blocks/video/video.css +++ b/plugins/aem-assets-plugin/blocks/video/video.css @@ -21,7 +21,7 @@ main>.section.video-container { overflow: hidden; background-color: #53565a; width: 100%; - height: 2160px; + height: calc(100vh - var(--nav-height)); } .video-hero .video-hero-content { diff --git a/plugins/aem-assets-plugin/blocks/video/video.js b/plugins/aem-assets-plugin/blocks/video/video.js index 51dc2e6cf..942d377e8 100644 --- a/plugins/aem-assets-plugin/blocks/video/video.js +++ b/plugins/aem-assets-plugin/blocks/video/video.js @@ -562,21 +562,23 @@ export default async function decorate(block) { // Check for progressive class const isProgressive = block.classList.contains('progressive'); - // Only load VideoJS if not progressive if (!isProgressive) { - if (block.classList.contains('delayed')) { - if (typeof window.DELAYED_PHASE !== 'undefined') { - if (window.DELAYED_PHASE) { - loadVideoJs(); - } else { - const delayedPhaseHandler = async () => { - document.removeEventListener('delayed-phase', delayedPhaseHandler); - await loadVideoJs(); - }; - document.addEventListener('delayed-phase', delayedPhaseHandler); - } + let vjsLoadingPhase; + if (block.classList.contains('lazy')) { + vjsLoadingPhase = 'lazy'; + } else if (block.classList.contains('delayed')) { + vjsLoadingPhase = 'delayed'; + } + + if (vjsLoadingPhase) { + if (window.LOADING_PHASE === vjsLoadingPhase) { + loadVideoJs(); } else { - setTimeout(loadVideoJs, 3000); + const vjsLoadingPhaseHandler = async () => { + document.removeEventListener(`${vjsLoadingPhase}-phase`, vjsLoadingPhaseHandler); + await loadVideoJs(); + }; + document.addEventListener(`${vjsLoadingPhase}-phase`, vjsLoadingPhaseHandler); } } else { await loadVideoJs(); diff --git a/scripts/delayed.js b/scripts/delayed.js index 568d19cf2..47dc89436 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,3 +1,3 @@ document.dispatchEvent(new Event('delayed-phase')); -Window.DELAYED_PHASE = true; +Window.LOADING_PHASE = 'delayed'; // add delayed functionality here diff --git a/scripts/scripts.js b/scripts/scripts.js index 07f2d5d01..92c521269 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -194,9 +194,9 @@ async function loadEager(doc) { decorateMain(main); document.body.classList.add('appear'); await loadSection(main.querySelector('.section'), waitForFirstImage); - // Artificial Delay eager loading of the page for 2 seconds - for demo only + // Artificial Delay eager loading of the page for 1 seconds - for demo only await new Promise((resolve) => { - setTimeout(resolve, 2000); + setTimeout(resolve, 1000); }); } @@ -217,6 +217,8 @@ async function loadEager(doc) { * @param {Element} doc The container element */ async function loadLazy(doc) { + document.dispatchEvent(new Event('lazy-phase')); + window.LOADING_PHASE = 'lazy'; const main = doc.querySelector('main'); await loadSections(main); @@ -237,7 +239,7 @@ async function loadLazy(doc) { */ function loadDelayed() { // eslint-disable-next-line import/no-cycle - window.setTimeout(() => import('./delayed.js'), 3000); + window.setTimeout(() => import('./delayed.js'), 5000); // load anything that can be postponed to the latest here }