From b2a4cfd8d488fab1bddea9d79864fa19c5cd2510 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 22:47:39 +0000
Subject: [PATCH] Enable videos to autoplay with sound on the platform

Modify the video player to automatically play videos with sound when they are loaded, and adjust the video card component to disable hover previews on mobile devices.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/FgaI1Sc
---
 client/src/components/video-card.tsx | 14 +++++++-------
 client/src/pages/VideoPage.tsx       |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index f22060b..bfc4dc0 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -55,11 +55,13 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
   // Delay preview start to avoid loading on quick mouse passes
   useEffect(() => {
     if (isHovered) {
-      // Enable preview on both mobile and desktop - shorter delay for mobile
-      const delay = window.innerWidth < 768 ? 300 : 800;
-      hoverTimeoutRef.current = setTimeout(() => {
-        setShowPreview(true);
-      }, delay);
+      // Only enable preview on desktop, disable on mobile
+      if (window.innerWidth >= 768) {
+        const delay = 800;
+        hoverTimeoutRef.current = setTimeout(() => {
+          setShowPreview(true);
+        }, delay);
+      }
     } else {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -124,8 +126,6 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
       className={`video-card transition-transform duration-200 hover:scale-[1.02] ${className}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      onTouchStart={() => setIsHovered(true)}
-      onTouchEnd={() => setIsHovered(false)}
     >
       {/* Video preview container */}
       <div 
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 615503e..0fd9c7d 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -433,11 +433,11 @@ export default function VideoPage() {
               )}
               {currentVideo.videoUrlIframe ? (
                 <iframe
-                  src={currentVideo.videoUrlIframe}
+                  src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1&muted=0`}
                   className="absolute inset-0 w-full h-full"
                   frameBorder="0"
                   allowFullScreen
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   onLoad={handleVideoPlay}
                   title={currentVideo.title}
                 />