feat: autoplay videos

components/Home/Video.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps<{
+  path: string;
+  poster: string;
+}>();
+
+const prefersReducedMotion = import.meta.client
+  ? matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
+const video = ref<HTMLVideoElement | undefined>();
+const isPlaying = ref(false);
+const hasAutoplay = ref(true);
+
+useIntersectionObserver(
+  video,
+  ([{ isIntersecting }]) => {
+    if (isIntersecting && !prefersReducedMotion && hasAutoplay.value) {
+      video.value?.play();
+      isPlaying.value = true;
+      hasAutoplay.value = false;
+    } else if (isPlaying.value) {
+      video.value?.pause();
+      isPlaying.value = false;
+    }
+  },
+  { threshold: 1 },
+);
+
+function handleVideoClick(event: MouseEvent) {
+  const player = event.target as HTMLVideoElement;
+
+  if (isPlaying.value) {
+    player.pause();
+    isPlaying.value = false;
+    return;
+  }
+
+  player.play();
+  isPlaying.value = true;
+}
+</script>
+
+<template>
+  <div
+    class="group relative cursor-pointer rounded-xl shadow ring-1 ring-gray-200 dark:ring-gray-800"
+    :class="[
+      !isPlaying && 'hover:ring-primary-500 dark:hover:ring-primary-400',
+    ]"
+  >
+    <video
+      ref="video"
+      :src="path"
+      :poster="poster"
+      muted
+      class="rounded-xl"
+      @ended="isPlaying = false"
+      @click="handleVideoClick"
+    />
+
+    <div
+      v-show="!isPlaying"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center rounded-xl bg-gradient-to-b from-gray-950/50 to-[rgba(0,0,0,0)] to-20%"
+    >
+      <UIcon
+        name="i-ri-play-circle-fill"
+        class="group-hover:text-primary-600 h-[4rem] w-[4rem] text-gray-900 md:h-[6rem] md:w-[6rem]"
+      />
+    </div>
+  </div>
+</template>

content/index.yml

@@ -16,6 +16,9 @@ hero:
       color: black
       icon: i-ri-arrow-right-line
       trailing: true
+  video:
+    path: /vid/kirby-seo-audit-demo.mp4
+    poster: /vid/kirby-seo-audit-demo-poster-start.jpg
 sections:
   - title: Your New Favorite <br class="hidden lg:block"> <span class="text-primary">Must-Have Plugin</span>
     slot: features

pages/index.vue

@@ -20,21 +20,6 @@ useSeoMeta({
   ogImage: "https://kirbyseo.com/social-card.png",
   twitterImage: "https://kirbyseo.com/social-card.png",
 });
-
-const isPlaying = ref(false);
-
-function handleVideoClick(event: MouseEvent) {
-  const player = event.target as HTMLVideoElement;
-
-  if (isPlaying.value) {
-    player.pause();
-    isPlaying.value = false;
-    return;
-  }
-
-  player.play();
-  isPlaying.value = true;
-}
 </script>
 
 <template>
@@ -67,39 +52,15 @@ function handleVideoClick(event: MouseEvent) {
       </template>
 
       <template #title>
-        <span v-html="page.hero?.title" />
+        <span v-html="page.hero.title" />
       </template>
 
       <template #description>
-        <span v-html="page.hero?.description" />
+        <span v-html="page.hero.description" />
       </template>
 
       <template #default>
-        <div
-          class="group relative cursor-pointer rounded-xl shadow ring-1 ring-gray-200 dark:ring-gray-800"
-          :class="[
-            !isPlaying && 'hover:ring-primary-500 dark:hover:ring-primary-400',
-          ]"
-        >
-          <video
-            src="/vid/kirby-seo-audit-demo.mp4"
-            poster="/vid/kirby-seo-audit-demo-poster.jpg"
-            muted
-            class="rounded-xl"
-            @ended="isPlaying = false"
-            @click="handleVideoClick"
-          />
-
-          <div
-            v-show="!isPlaying"
-            class="pointer-events-none absolute inset-0 flex items-center justify-center rounded-xl bg-gradient-to-b from-gray-950/50 to-[rgba(0,0,0,0)] to-20%"
-          >
-            <UIcon
-              name="i-ri-play-circle-fill"
-              class="group-hover:text-primary-600 h-[4rem] w-[4rem] text-gray-900 md:h-[6rem] md:w-[6rem]"
-            />
-          </div>
-        </div>
+        <HomeVideo v-bind="page.hero.video" />
       </template>
     </ULandingHero>