adding fixed-height variant to embed block

Author: kunwarsaluja

blocks/embed/embed.css

@@ -1,9 +1,9 @@
 .embed {
-    width: unset;
-    text-align: center;
-    max-width: 800px;
-    margin: 32px auto;
-  }
+  width: 100%;
+  max-width: 100%;
+  margin: 32px auto;
+  text-align: center;
+}
 
   .embed > div {
     display: flex;

blocks/embed/embed.js

@@ -6,31 +6,35 @@
 
 import { loadScript } from '../../scripts/aem.js';
 
-const getDefaultEmbed = (url) => `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
+const getEmbedContainerStyle = (fixedHeight) => (fixedHeight
+  ? `left: 0; width: 100%; height: ${fixedHeight}px; position: relative;`
+  : 'left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;');
+
+const getDefaultEmbed = (url, fixedHeight) => `<div style="${getEmbedContainerStyle(fixedHeight)}">
     <iframe src="${url.href}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen=""
       scrolling="no" allow="encrypted-media" title="Content from ${url.hostname}" loading="lazy">
     </iframe>
   </div>`;
 
-const embedYoutube = (url, autoplay) => {
+const embedYoutube = (url, autoplay, fixedHeight) => {
   const usp = new URLSearchParams(url.search);
   const suffix = autoplay ? '&muted=1&autoplay=1' : '';
   let vid = usp.get('v') ? encodeURIComponent(usp.get('v')) : '';
   const embed = url.pathname;
   if (url.origin.includes('youtu.be')) {
     [, vid] = url.pathname.split('/');
   }
-  const embedHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
+  const embedHTML = `<div style="${getEmbedContainerStyle(fixedHeight)}">
       <iframe src="https://www.youtube.com${vid ? `/embed/${vid}?rel=0&v=${vid}${suffix}` : embed}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
       allow="autoplay; fullscreen; picture-in-picture; encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" title="Content from Youtube" loading="lazy"></iframe>
     </div>`;
   return embedHTML;
 };
 
-const embedVimeo = (url, autoplay) => {
+const embedVimeo = (url, autoplay, fixedHeight) => {
   const [, video] = url.pathname.split('/');
   const suffix = autoplay ? '?muted=1&autoplay=1' : '';
-  const embedHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
+  const embedHTML = `<div style="${getEmbedContainerStyle(fixedHeight)}">
       <iframe src="https://player.vimeo.com/video/${video}${suffix}" 
       style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
       frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen  
@@ -45,7 +49,17 @@ const embedTwitter = (url) => {
   return embedHTML;
 };
 
-const loadEmbed = (block, link, autoplay) => {
+const getFixedHeight = (block) => {
+  const fixedHeightClass = [...block.classList]
+    .find((className) => /^(?:fixedheight-|fixed-height-|h-)?\d+(?:px)?$/i.test(className));
+  if (!fixedHeightClass) return null;
+
+  const match = fixedHeightClass.match(/(\d+)/);
+  const value = match ? Number(match[1]) : NaN;
+  return Number.isFinite(value) && value > 0 ? value : null;
+};
+
+const loadEmbed = (block, link, autoplay, fixedHeight) => {
   if (block.classList.contains('embed-is-loaded')) {
     return;
   }
@@ -68,10 +82,10 @@ const loadEmbed = (block, link, autoplay) => {
   const config = EMBEDS_CONFIG.find((e) => e.match.some((match) => link.includes(match)));
   const url = new URL(link);
   if (config) {
-    block.innerHTML = config.embed(url, autoplay);
+    block.innerHTML = config.embed(url, autoplay, fixedHeight);
     block.classList = `block embed embed-${config.match[0]}`;
   } else {
-    block.innerHTML = getDefaultEmbed(url);
+    block.innerHTML = getDefaultEmbed(url, fixedHeight);
     block.classList = 'block embed';
   }
   block.classList.add('embed-is-loaded');
@@ -80,22 +94,27 @@ const loadEmbed = (block, link, autoplay) => {
 export default function decorate(block) {
   const placeholder = block.querySelector('picture');
   const link = block.querySelector('a').href;
+  const fixedHeight = getFixedHeight(block);
   block.textContent = '';
 
   if (placeholder) {
     const wrapper = document.createElement('div');
     wrapper.className = 'embed-placeholder';
+    if (fixedHeight) {
+      wrapper.style.aspectRatio = 'auto';
+      wrapper.style.height = `${fixedHeight}px`;
+    }
     wrapper.innerHTML = '<div class="embed-placeholder-play"><button type="button" title="Play"></button></div>';
     wrapper.prepend(placeholder);
     wrapper.addEventListener('click', () => {
-      loadEmbed(block, link, true);
+      loadEmbed(block, link, true, fixedHeight);
     });
     block.append(wrapper);
   } else {
     const observer = new IntersectionObserver((entries) => {
       if (entries.some((e) => e.isIntersecting)) {
         observer.disconnect();
-        loadEmbed(block, link);
+        loadEmbed(block, link, false, fixedHeight);
       }
     });
     observer.observe(block);