update latest

resources/views/videos/show.blade.php

@@ -187,8 +187,8 @@
         <!-- Video Section -->
         <div class="yt-video-section">
             <!-- Video Player -->
-            <div class="video-container @if($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif">
-                <video controls playsinline preload="metadata">
+            <div class="video-container @if($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif" id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata">
                     <source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
                 </video>
             </div>
@@ -279,5 +279,30 @@
     </script>
     @endauth
     @endif
+    
+    <script>
+        // Auto-play video with sound when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            var videoPlayer = document.getElementById('videoPlayer');
+            if (videoPlayer) {
+                // Try to autoplay with sound (works because user just clicked on the video)
+                var playPromise = videoPlayer.play();
+                
+                if (playPromise !== undefined) {
+                    playPromise.then(function() {
+                        // Autoplay started successfully
+                        console.log('Video autoplayed with sound');
+                    }).catch(function(error) {
+                        // Autoplay was prevented, try muted
+                        console.log('Autoplay blocked, attempting muted autoplay');
+                        videoPlayer.muted = true;
+                        videoPlayer.play().catch(function(e) {
+                            console.log('Muted autoplay also blocked');
+                        });
+                    });
+                }
+            }
+        });
+    </script>
 @endsection