feat: extract and reuse youtube utils

blocks/columns/columns.css

@@ -68,30 +68,8 @@
   aspect-ratio: 16 / 9;
 }
 
-.columns .media-wrapper .video-embed iframe {
-  height: 100%;
-  width: 100%;
-  border: none;
-}
-
 .columns .media-wrapper .video-embed .placeholder {
-  position: absolute;
-  inset: 0;
   z-index: 1;
-  margin: 0;
-  cursor: pointer;
-}
-
-.columns .media-wrapper .video-embed .placeholder .icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  height: 80px;
-  width: 80px;
-  color: var(--color-white);
-  filter: drop-shadow(0 1px 5px rgb(0 0 0 / 60%));
-  transform: translate(-50%, -50%);
-  pointer-events: none;
 }
 
 @media (width >= 600px) {

blocks/columns/columns.js

@@ -1,6 +1,5 @@
 import { createOptimizedPicture } from '../../scripts/aem.js';
-import { isYouTubeHref } from '../../scripts/scripts.js';
-import { createYouTubeEmbed, createPlaceholder } from '../video/video.js';
+import { transformVideoLinks } from '../../scripts/scripts.js';
 
 /**
  * Returns the shared column count if every row has the same number of columns.
@@ -49,68 +48,6 @@ function detectAction(block) {
   });
 }
 
-/**
- * Returns true if el is a paragraph containing a single YouTube link.
- * @param {Element} el - The element to test
- * @returns {boolean}
- */
-function isVideoLink(el) {
-  if (el.tagName !== 'P' || el.children.length !== 1) return false;
-  const a = el.firstElementChild;
-  return a.tagName === 'A' && isYouTubeHref(a.href);
-}
-
-/**
- * Transforms a media column with a YouTube link into a video embed.
- * @param {Element} col - The column element to transform
- * @param {string} href - The YouTube URL to embed
- */
-function decorateVideo(col, href) {
-  const embed = createYouTubeEmbed(href);
-  if (!embed) return;
-
-  const container = document.createElement('div');
-  container.className = 'video-embed';
-
-  const picture = col.querySelector('picture');
-  const placeholder = createPlaceholder(picture, () => {
-    const src = new URL(embed.src);
-    src.searchParams.set('autoplay', 1);
-    embed.src = src.href;
-    if (!embed.isConnected) container.append(embed);
-  });
-
-  if (placeholder) container.append(placeholder);
-  col.replaceChildren(container);
-  col.dataset.media = 'video';
-
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (!entry.isIntersecting) return;
-      container.append(embed);
-      observer.disconnect();
-    });
-  }, { rootMargin: '0px' });
-  observer.observe(container);
-}
-
-/**
- * Transforms a video link in a media-only column into a video embed.
- * @param {Element} col - Column element to inspect and potentially transform
- */
-function transformVideoLinks(col) {
-  const videoLinkEl = [...col.children].find(isVideoLink);
-  if (videoLinkEl) {
-    const nonVideo = [...col.children].filter((el) => el !== videoLinkEl);
-    const isPictureParagraph = (el) => el.tagName === 'P'
-      && el.children.length === 1
-      && el.firstElementChild.tagName === 'PICTURE';
-    if (nonVideo.every((el) => el.tagName === 'PICTURE' || el.tagName === 'VIDEO' || isPictureParagraph(el))) {
-      decorateVideo(col, videoLinkEl.firstElementChild.href);
-    }
-  }
-}
-
 /** @param {Element} block */
 export default function decorate(block) {
   [...block.children].forEach((row) => {
@@ -124,6 +61,7 @@ export default function decorate(block) {
           || el.classList.contains('video-embed'),
       );
       col.classList.add(isMedia ? 'media-wrapper' : 'body-wrapper');
+      if (els.length === 1 && els[0].classList.contains('video-embed')) col.dataset.media = 'video';
     });
     if (row.querySelector('.media-wrapper')) row.dataset.row = 'media';
   });

blocks/gallery/gallery.css

@@ -67,37 +67,6 @@
   width: 100%;
 }
 
-.gallery .media-wrapper .video-embed iframe {
-  height: 100%;
-  width: 100%;
-  border: none;
-}
-
-.gallery .media-wrapper .video-embed .placeholder {
-  position: absolute;
-  inset: 0;
-  margin: 0;
-  cursor: pointer;
-}
-
-.gallery .media-wrapper .video-embed .placeholder img {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-
-.gallery .media-wrapper .video-embed .placeholder .icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  height: 80px;
-  width: 80px;
-  color: var(--color-white);
-  filter: drop-shadow(0 1px 5px rgb(0 0 0 / 60%));
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
 .gallery .body-wrapper {
   padding: var(--space-s) 0;
 }

blocks/gallery/gallery.js

@@ -1,59 +1,5 @@
-import { isYouTubeHref, loadCopy } from '../../scripts/scripts.js';
+import { loadCopy, transformVideoLinks } from '../../scripts/scripts.js';
 import { createOptimizedPicture, decorateIcons } from '../../scripts/aem.js';
-import { createYouTubeEmbed, createPlaceholder } from '../video/video.js';
-
-/**
- * Returns `true` if a column child is a paragraph containing a single YouTube link.
- * @param {HTMLElement} el - Column child element to test
- * @returns {boolean}
- */
-function isVideoLink(el) {
-  if (el.tagName !== 'P' || el.children.length !== 1) return false;
-  const a = el.firstElementChild;
-  return a.tagName === 'A' && isYouTubeHref(a.href);
-}
-
-/**
- * Replaces a media column's YouTube link with a lazy-loaded embed behind a poster placeholder.
- * @param {HTMLElement} col - Media column containing the link
- * @param {string} href - YouTube URL to embed
- */
-function decorateVideo(col, href) {
-  const embed = createYouTubeEmbed(href);
-  if (!embed) return;
-
-  const container = document.createElement('div');
-  container.className = 'video-embed';
-
-  const picture = col.querySelector('picture');
-  const placeholder = createPlaceholder(picture, () => {
-    const src = new URL(embed.src);
-    src.searchParams.set('autoplay', 1);
-    embed.src = src.href;
-    if (!embed.isConnected) container.append(embed);
-  });
-
-  if (placeholder) container.append(placeholder);
-  col.replaceChildren(container);
-
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (!entry.isIntersecting) return;
-      container.append(embed);
-      observer.disconnect();
-    });
-  }, { threshold: 1 });
-  observer.observe(container);
-}
-
-/**
- * Finds a YouTube link in a media column and converts it to a video embed.
- * @param {HTMLElement} col - Media column to inspect and potentially transform
- */
-function transformVideoLinks(col) {
-  const videoLink = [...col.children].find(isVideoLink);
-  if (videoLink) decorateVideo(col, videoLink.firstElementChild.href);
-}
 
 /**
  * Builds a slide's media figure and caption from the row's media/caption columns.

blocks/tabs/tabs.css

@@ -1,50 +1,48 @@
 .tabs .tabs-list {
   display: flex;
+  overflow-x: auto;
   padding: 0;
   background-color: var(--color-bg-light);
-  overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 .tabs .tabs-list button {
-  flex: 1 0 max-content;
+  flex: 1 0 min-content;
   margin: 0;
   border: 0;
   border-bottom: 8px solid var(--color-bg);
   padding: var(--space-m) var(--space-l);
   background-color: var(--color-bg-light);
   font-family: var(--heading-font-family);
-  font-size: var(--text-m);
-  font-weight: 700;
-  text-transform: uppercase;
-  white-space: nowrap;
+  line-height: 1.2;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: box-shadow 0.2s;
 }
 
 .tabs .tabs-list button:hover {
-  background-color: var(--color-border);
-  box-shadow: inset 0 -5px 0 black;
+  box-shadow: inset 0 -5px 0 var(--color-bg-dark);
 }
 
 .tabs .tabs-list button[aria-selected='true'] {
   position: relative;
-  background-color: var(--color-bg);
   box-shadow: inset 0 -5px 0 var(--color-brand);
+  background-color: var(--color-bg);
 }
 
 .tabs .tabs-list button[aria-selected='true']::after {
   content: '';
   position: absolute;
-  bottom: -8px;
   left: 50%;
-  transform: translateX(-50%);
-  border-inline: 8px solid transparent;
+  bottom: -8px;
   border-top: 8px solid var(--color-brand);
+  border-inline: 8px solid transparent;
+  transform: translateX(-50%);
 }
 
-.tabs .tabs-list button p {
-  margin: 0;
+@media (width >= 900px) {
+  .tabs .tabs-list button {
+    flex: 1 1 0;
+  }
 }
 
 .tabs .tabs-panel {
@@ -56,6 +54,30 @@
   display: none;
 }
 
+.tabs .tabs-panel .media-wrapper {
+  position: relative;
+  overflow: hidden;
+  max-width: var(--content-width);
+  margin: auto;
+  aspect-ratio: 16 / 9;
+}
+
+.tabs .tabs-panel .media-wrapper picture {
+  position: absolute;
+  inset: 0;
+}
+
+.tabs .tabs-panel .media-wrapper img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.tabs .tabs-panel .media-wrapper .video-embed {
+  height: 100%;
+  width: 100%;
+}
+
 @media (width >= 900px) {
   .tabs .tabs-panel {
     padding: var(--space-l);

blocks/tabs/tabs.js

@@ -1,5 +1,25 @@
 // eslint-disable-next-line import/no-unresolved
 import { toClassName } from '../../scripts/aem.js';
+import { transformVideoLinks } from '../../scripts/scripts.js';
+
+/**
+ * Marks a tabpanel's media-only cells (picture, video, or video link) as `media-wrapper`,
+ * matching the columns block's media styling.
+ * @param {Element} tabpanel - The tabpanel whose cells to inspect
+ */
+function decorateMedia(tabpanel) {
+  [...tabpanel.children].forEach((cell) => {
+    transformVideoLinks(cell);
+
+    const els = [...cell.children];
+    const isMedia = els.length > 0 && els.every(
+      (el) => el.tagName === 'PICTURE'
+        || el.tagName === 'VIDEO'
+        || el.classList.contains('video-embed'),
+    );
+    if (isMedia) cell.classList.add('media-wrapper');
+  });
+}
 
 export default async function decorate(block) {
   // build tablist
@@ -41,6 +61,7 @@ export default async function decorate(block) {
     });
     tablist.append(button);
     tab.remove();
+    decorateMedia(tabpanel);
   });
 
   block.prepend(tablist);