feat(slot): added image named slot for poster overrides (#107)

justinribeiro · Nov 14, 2024 · 0f8039b · 0f8039b
1 parent b9334dc
commit 0f8039b
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/demo/slot.html b/demo/slot.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"
+    />
+    <title>lite-youtube demo</title>
+    <script type="module" src="../lite-youtube.js"></script>
+    <style>
+      * {
+        box-sizing: content-box;
+      }
+      body {
+        max-width: 800px;
+        margin: auto;
+      }
+      pre {
+        width: 100%;
+        padding: 1em;
+        overflow-x: scroll;
+        background-clip: z;
+        background-color: #eee;
+      }
+      .styleIt {
+        width: 400px;
+      }
+      #bigBlock {
+        height: 600px;
+      }
+    </style>
+  </head>
+  <body>
+
+
+&lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; nocookie&lt;/lite-youtube&gt;
+    </pre>
+    <lite-youtube
+      videoid="guJLfqTFfIw"
+    >
+      <img slot="image" src="https://storage.googleapis.com/jdr-public-imgs/pages/page-4-test.jpg">
+    </lite-youtube>
+
+  </body>
+</html>
diff --git a/lite-youtube.ts b/lite-youtube.ts
@@ -142,8 +142,9 @@ export class LiteYTEmbed extends HTMLElement {
           cursor: pointer;
         }
 
-        #fallbackPlaceholder {
+        #fallbackPlaceholder, slot[name=image]::slotted(*) {
           object-fit: cover;
+          width: 100%;
         }
 
         #frame::before {
@@ -195,9 +196,11 @@ export class LiteYTEmbed extends HTMLElement {
       </style>
       <div id="frame">
         <picture>
-          <source id="webpPlaceholder" type="image/webp">
-          <source id="jpegPlaceholder" type="image/jpeg">
-          <img id="fallbackPlaceholder" referrerpolicy="origin" loading="lazy">
+          <slot name="image">
+            <source id="webpPlaceholder" type="image/webp">
+            <source id="jpegPlaceholder" type="image/jpeg">
+            <img id="fallbackPlaceholder" referrerpolicy="origin" loading="lazy">
+          </slot>
         </picture>
         <button id="playButton"></button>
       </div>