From b05111b61359bcbcbd05b2ab01f8802ac068b082 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 01:59:29 +0200
Subject: [PATCH] Fix video not playing - add multiple event listeners and
 fallback

- Add loadeddata and play events in addition to canplaythrough
- Add fallback timeout to ensure video becomes visible after 1.5s
- This ensures video will display even if autoplay events don't fire properly
---
 apps/website/components/HeroSection.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 726831c..5bb49fd 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -11,7 +11,9 @@
         poster="/golden_gate.jpg"
         class="hero-video"
         :class="{ 'video-loaded': videoLoaded }"
+        @loadeddata="handleVideoLoaded"
         @canplaythrough="handleVideoLoaded"
+        @play="handleVideoLoaded"
       >
         <source
           src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
@@ -164,6 +166,13 @@ onMounted(() => {
   handleVideoVisibility()
   initSmoothScroll()
   animateCount()
+
+  // Fallback: ensure video becomes visible after a delay
+  setTimeout(() => {
+    if (!videoLoaded.value) {
+      videoLoaded.value = true
+    }
+  }, 1500)
 })
 </script>