Video summary facade (#40)

* Video summary facade * Fix linting issues * Fix autoplay
famous-smoke · Aug 5, 2024 · 4bab7d8 · 4bab7d8
1 parent 806b177
commit 4bab7d8
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/cigars-for-beginners/blocks/video-summary/video-summary.css b/cigars-for-beginners/blocks/video-summary/video-summary.css
@@ -7,6 +7,37 @@
     aspect-ratio: 16 / 9;
 }
 
+.video-summary .video-summary-embed-facade {
+    position: relative;
+    max-width: 820px;
+    margin: 0 auto;
+    cursor: pointer;
+}
+
+.video-summary .video-summary-embed-title {
+    position: absolute;
+    top: 0;
+    color: #fff;
+    margin: 0 auto;
+    padding: 0.5em;
+    text-shadow: 2px 2px black;
+    font-size: var(--body-font-size-m);
+    background: #00000075;
+}
+
+.video-summary .video-summary-embed-facade::after {
+    content: url('/cigars-for-beginners/icons/play.png');
+    position: absolute;
+    display: block;
+    z-index: 1;
+    width: 60px;
+    height: 60px;
+    margin: 0 auto;
+    inset: 50% 0 0;
+    transform: translateY(-50%);
+    filter: drop-shadow(2px 4px 6px black);
+}
+
 .video-summary > div > div:last-child {
     text-align: center;
 }
@@ -52,3 +83,9 @@
     visibility: visible;
     max-height: 500px;
 }
+
+@media (max-width: 600px) {
+    .video-summary-embed-title {
+        font-size: 0.8em;
+    }
+}
diff --git a/cigars-for-beginners/blocks/video-summary/video-summary.js b/cigars-for-beginners/blocks/video-summary/video-summary.js
@@ -5,8 +5,12 @@
  */
 function getEmbed(url) {
   const frame = document.createElement('iframe');
+
+  const frameUrl = new URL(url);
+  frameUrl.searchParams.append('autoplay', 1);
+
   frame.className = 'video-summary-embed';
-  frame.src = url;
+  frame.src = frameUrl.toString();
   frame.allow = 'autoplay; fullscreen; picture-in-picture';
   frame.allowFullscreen = true;
 
@@ -34,9 +38,23 @@ function getShowHide() {
 
 export default async function decorate(block) {
   const url = block.querySelector('a');
-  const embed = getEmbed(url);
-  url.parentElement.replaceWith(embed);
 
-  const description = block.querySelector('div > div:last-child p');
+  const title = block.querySelector('h3');
+  title.className = 'video-summary-embed-title';
+
+  const img = block.querySelector('img');
+  img.className = 'video-summary-embed';
+
+  const facadeWrap = title.parentElement;
+  facadeWrap.className = 'video-summary-embed-facade';
+  facadeWrap.addEventListener('click', () => {
+    const embed = getEmbed(url.innerText);
+    facadeWrap.replaceWith(embed);
+    title.remove();
+  });
+
+  url.remove();
+
+  const description = block.querySelector(':scope > div > div:last-child p');
   description.parentElement.prepend(getShowHide());
 }