Video Hero Option (#193)

* added video tag if an MP4 link is included on the document * correct video width * Delay before showing video. * Fix artifacts from timing.. --------- Co-authored-by: Bryan Stopp <[email protected]> Co-authored-by: Bryan Stopp <[email protected]>
hlxsites · May 21, 2024 · 0d4d91c · 0d4d91c
1 parent 9304fb1
commit 0d4d91c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -59,6 +59,21 @@ main .section.full-width > .hero-wrapper {
   height: 100%;
 }
 
+/* video included */
+.hero .hero-video {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.hero .hero-video.hide {
+  display: none;
+}
+
 .hero.block > div {
   padding: 0 16px;
   width: 100%;
@@ -101,6 +116,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,21 @@
 import {
   preloadHeroImage,
 } from '../../scripts/scripts.js';
-
 import buildSearch from './search/search.js';
 
+const decorateVideo = (parent, src) => {
+  const video = document.createElement('video');
+  video.classList.add('hero-video');
+  video.loop = true;
+  const source = document.createElement('source');
+  source.src = src;
+  source.type = 'video/mp4';
+  video.appendChild(source);
+  parent.appendChild(video);
+  video.muted = true;
+  video.play();
+};
+
 async function getPictures(block) {
   let pictures = block.querySelectorAll('picture');
   if (!pictures.length) {
@@ -32,6 +44,21 @@ 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) {
+    const parent = videoLink.parentElement;
+    const videoHref = videoLink.href;
+    videoLink.remove();
+    setTimeout(() => {
+      decorateVideo(parent, videoHref);
+    }, 3000);
+  }
+
   const pictures = await getPictures(block);
   preloadHeroImage(pictures[0]);
   pictures[0].classList.add('active');
@@ -80,6 +107,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
@@ -8,7 +8,7 @@
 
 .hero.block > div .content .search .options .option {
   background-color: var(--primary-color);
-  border-radius: 6px 0 0 0;
+  border-radius: 6px 0 0;
   color: var(--white);
   cursor: pointer;
   flex: 1;
@@ -23,7 +23,7 @@
 .hero.block > div .content .search .options .option.active {
   background-color: var(--white);
   border-top-left-radius: 6px;
-  border-top-right-radius: 0px;
+  border-top-right-radius: 0;
   color: var(--primary-color);
   cursor: default;
   font-weight: var(--font-weight-semibold);
@@ -45,7 +45,7 @@
 .hero.block .content .search-bar {
   background-color: var(--white);
   border-bottom: 6px solid var(--primary-color);
-  border-radius: 0 0 6px 6px;
+  border-radius: 0 6px 6px;
   display: flex;
   margin-bottom: 8px;
   padding: 5px;