replace the video with a better one

Hetari · Sep 1, 2024 · 88fabd2 · 88fabd2
1 parent 500e252
commit 88fabd2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/assets/videos/contact.mp4 b/src/assets/videos/contact.mp4
diff --git a/src/assets/videos/index.ts b/src/assets/videos/index.ts
@@ -1,4 +1,4 @@
 import earthLottie from './earth.json';
-import contact from './contact.webp';
+import contact from './contact.mp4';
 
 export { earthLottie, contact };
diff --git a/src/components/sections/Contact.vue b/src/components/sections/Contact.vue
@@ -3,10 +3,18 @@
     class="relative min-h-svh w-full select-none overflow-y-clip p-[4vh]"
   >
     <div
-      class="flex-center relative h-[92vh] w-full flex-col rounded-lg bg-black bg-cover bg-bottom bg-no-repeat uppercase"
-      :style="'background-image: url(' + contact + ') !important; '"
+      class="flex-center relative h-[92vh] w-full flex-col rounded-lg bg-black uppercase"
     >
-      <div class="flex-center flex-col gap-y-10">
+      <video
+        class="absolute bottom-0 left-0 h-full w-full rounded-lg object-cover object-bottom"
+        :src="contact"
+        autoplay
+        muted
+        loop
+        playsinline
+      ></video>
+      <!-- :style="'background-image: url(' + contact + ') !important; '" -->
+      <div class="flex-center z-10 flex-col gap-y-10">
         <p class="heading-4 text-center font-mono text-flax-smoke-300">
           (Need an unfair advantage?)
         </p>