added video tag if an MP4 link is included on the document

hlxsites · Jan 19, 2024 · bc2fc2d · bc2fc2d
1 parent 6d8ed43
commit bc2fc2d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -58,6 +58,21 @@ main .section.full-width > .hero-wrapper {
   height: 100%;
 }
 
+/* video included */
+.hero .hero-video {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  height: 100%;
+  width: 100vw;
+  object-fit: cover;
+  object-position: center;
+}
+
+.hero .hero-video.hide {
+  display: none;
+}
+
 .hero.block > div {
   padding: 0 16px;
 }
@@ -99,6 +114,7 @@ main .section.full-width > .hero-wrapper {
 .hero.block > div .content h2,
 .hero.block > div .content p {
   color: var(--white);
+  z-index: 1;
 }
 
 .hero.block > .row > .headline {

diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
@@ -1,9 +1,26 @@
 import {
   preloadHeroImage,
 } from '../../scripts/scripts.js';
-
 import buildSearch from './search/search.js';
 
+const decorateVideo = (link) => {
+  const { parentElement } = link;
+  const video = document.createElement('video');
+  video.classList.add('hero-video', 'hide');
+  video.loop = true;
+  const source = document.createElement('source');
+  source.src = link.href;
+  source.type = 'video/mp4';
+  video.appendChild(source);
+  parentElement.appendChild(video);
+  link.remove();
+  setTimeout(() => {
+    video.classList.remove('hide');
+    video.muted = true;
+    video.play();
+  }, 500);
+};
+
 async function getPictures(block) {
   let pictures = block.querySelectorAll('picture');
   if (!pictures.length) {
@@ -32,6 +49,14 @@ function rotateImage(images) {
 }
 
 export default async function decorate(block) {
+  // check if it has a video
+  const video = block.querySelector('a[href*=".mp4"]');
+  const videoWrapper = video && video.closest('div');
+  videoWrapper.classList.add('video-wrapper');
+  const videoLink = videoWrapper?.firstElementChild;
+  // transform link into a video tag
+  if (videoLink) decorateVideo(videoLink);
+
   const pictures = await getPictures(block);
   preloadHeroImage(pictures[0]);
   pictures[0].classList.add('active');
@@ -80,6 +105,7 @@ export default async function decorate(block) {
 
   const wrapper = document.createElement('div');
   wrapper.append(images);
+  if (videoWrapper) wrapper.append(videoWrapper);
   // don't add contentWrapper if it's empty
   if (contentWrapper.innerHTML !== '') wrapper.append(contentWrapper);
   if (headlineWrapper.hasChildNodes()) {

diff --git a/blocks/hero/search/search.css b/blocks/hero/search/search.css
@@ -17,6 +17,7 @@
   text-transform: uppercase;
   color: var(--white);
   cursor: default;
+  z-index: 1;
 }
 
 .hero.block > div .content .search .options .option.active {