adding embed block under form folder

Author: krizel4

blocks/forms/forms.css

@@ -0,0 +1,62 @@
+.embed {
+    width: unset;
+    text-align: center;
+    max-width: 800px;
+    margin: 32px auto;
+  }
+
+  .embed > div {
+    display: flex;
+    justify-content: center;
+  }
+
+  .embed.embed-twitter .twitter-tweet-rendered {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .embed .embed-placeholder {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    position: relative;
+  }
+
+  .embed .embed-placeholder > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    inset: 0;
+  }
+
+  .embed .embed-placeholder picture img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .embed .embed-placeholder-play button {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    transform: scale(3);
+    width: 22px;
+    height: 22px;
+    border: 2px solid;
+    border-radius: 20px;
+    padding: 0;
+  }
+
+  .embed .embed-placeholder-play button::before {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    width: 0;
+    height: 10px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 6px solid;
+    top: 4px;
+    left: 7px;
+  }

blocks/forms/forms.js

@@ -0,0 +1,113 @@
+/*
+ * Embed Block
+ * Show videos and social posts directly on your page
+ * https://www.hlx.live/developer/block-collection/embed
+ */
+
+const loadScript = (url, callback, type) => {
+    const head = document.querySelector('head');
+    const script = document.createElement('script');
+    script.src = url;
+    if (type) {
+      script.setAttribute('type', type);
+    }
+    script.onload = callback;
+    head.append(script);
+    return script;
+  };
+
+  const getDefaultEmbed = (url) => `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
+      <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 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%;">
+        <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 [, 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%;">
+        <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
+        title="Content from Vimeo" loading="lazy"></iframe>
+      </div>`;
+    return embedHTML;
+  };
+
+  const embedTwitter = (url) => {
+    const embedHTML = `<blockquote class="twitter-tweet"><a href="${url.href}"></a></blockquote>`;
+    loadScript('https://platform.twitter.com/widgets.js');
+    return embedHTML;
+  };
+
+  const loadEmbed = (block, link, autoplay) => {
+    if (block.classList.contains('embed-is-loaded')) {
+      return;
+    }
+
+    const EMBEDS_CONFIG = [
+      {
+        match: ['youtube', 'youtu.be'],
+        embed: embedYoutube,
+      },
+      {
+        match: ['vimeo'],
+        embed: embedVimeo,
+      },
+      {
+        match: ['twitter'],
+        embed: embedTwitter,
+      },
+    ];
+
+    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.classList = `block embed embed-${config.match[0]}`;
+    } else {
+      block.innerHTML = getDefaultEmbed(url);
+      block.classList = 'block embed';
+    }
+    block.classList.add('embed-is-loaded');
+  };
+
+  export default function decorate(block) {
+    const placeholder = block.querySelector('picture');
+    const link = block.querySelector('a').href;
+    block.textContent = '';
+
+    if (placeholder) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'embed-placeholder';
+      wrapper.innerHTML = '<div class="embed-placeholder-play"><button type="button" title="Play"></button></div>';
+      wrapper.prepend(placeholder);
+      wrapper.addEventListener('click', () => {
+        loadEmbed(block, link, true);
+      });
+      block.append(wrapper);
+    } else {
+      const observer = new IntersectionObserver((entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          observer.disconnect();
+          loadEmbed(block, link);
+        }
+      });
+      observer.observe(block);
+    }
+  }

fstab.yaml

@@ -1,2 +1,2 @@
 mountpoints:
-  /: https://drive.google.com/drive/folders/1MBHrHVM6e_j9zJNw5QbH8WDb8GgzNajC
+  /: https://drive.google.com/drive/folders/1MBHrHVM6e_j9zJNw5QbH8WDb8GgzNajC