From 97c4c2d648eab83708fbdab13b12564c8121ca21 Mon Sep 17 00:00:00 2001
From: Vidyoot Senthil <vidyoots@gmail.com>
Date: Wed, 18 Dec 2024 14:44:28 -0600
Subject: [PATCH] feature: add video embed to public page template

---
 server/src/public/page.html | 61 +++++++++++++++++++++++++++++++------
 1 file changed, 51 insertions(+), 10 deletions(-)

diff --git a/server/src/public/page.html b/server/src/public/page.html
index 513f2036e..93867f0ed 100644
--- a/server/src/public/page.html
+++ b/server/src/public/page.html
@@ -172,9 +172,6 @@
         color: black;
         padding: 0.3rem;
         font-size: 0.8rem;
-        position: fixed;
-        bottom: 0.5rem;
-        left: 0.5rem;
         text-decoration: none;
       }
 
@@ -264,6 +261,41 @@
           background-color:  color-mix(in srgb, var(--brand-color), black 20%);
         }
       }
+
+      .video-wrapper {
+        position: fixed;
+        bottom: 20px;
+        left: 20px;
+        width: 100%;
+        max-width: 18.5rem;
+        height: 14.5rem;
+        margin: 0;
+        padding: 0;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .video-wrapper iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        object-fit: cover;
+      }
+
+      @media (max-width: 640px) {
+        .video-wrapper {
+          position: relative;
+          bottom: 0;
+          left: 0;
+          margin: 0 auto;
+          max-width: calc(100vw - 4rem);
+          height: 20rem;
+        }
+      }
     </style>
 
     <script type="module">
@@ -284,15 +316,24 @@
         params.singleProductOptions.productName %} {% include "product.html" %}
         {% endif %} {% if tabs|length > 0 %} {% include "tabs.html" %} {% else
         %} {% include "search-component-code.html" %} {% endif %}
+        <div class="video-wrapper">
+          {% if logged_in %}
+          <a
+            class="dev-back-button"
+            href="{{dashboard_url}}/dataset/{{params.datasetId}}/public-page"
+            >Back To Dashboard</a
+          >
+          {% endif %}
+          <iframe
+            src="{{params.videoLink}}"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          >
+          </iframe>
+        </div>
       </div>
     </main>
-    {% if logged_in %}
-    <a
-      class="dev-back-button"
-      href="{{dashboard_url}}/dataset/{{params.datasetId}}/public-page"
-      >Back To Dashboard</a
-    >
-    {% endif %}
   </body>
 
   <canvas id="canvas"></canvas>