Change teaser image to a live video

aokblast · Dec 28, 2023 · 4183ffd · 4183ffd
1 parent f2f2da6
commit 4183ffd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/lib/ui/TeaserImage.svelte b/src/lib/ui/TeaserImage.svelte
@@ -10,8 +10,7 @@
   } from "svelte-feather-icons";
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="rounded-lg border border-white/20 overflow-hidden" on:click>
+<div class="rounded-lg border border-white/20 overflow-hidden">
   <div class="flex bg-zinc-900 items-end">
     <div class="px-4 py-3 flex gap-1.5">
       <div class="w-2.5 h-2.5 rounded-full bg-red-500" />
@@ -42,8 +41,11 @@
       <MoreVerticalIcon class="w-4 h-4 text-zinc-300" />
     </div>
   </div>
-  <img
-    src="https://i.imgur.com/Q3qKAHW.png"
-    alt="Browser with multiple terminal windows and live cursors"
-  />
+  <video muted autoplay loop>
+    <source
+      src="https://sshx.s3.amazonaws.com/media/teaser-video.mov"
+      type="video/mp4"
+    />
+    <track kind="captions" />
+  </video>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -159,7 +159,7 @@
     </div>
 
     <div class="my-48 hidden md:block">
-      <TeaserImage on:click={scrollToInstallation} />
+      <TeaserImage />
     </div>
 
     <h2 bind:this={installationEl} class="mt-40 mb-16">