Update app.py

app.py

@@ -86,49 +86,14 @@ body {
     box-shadow: 0 20px 40px rgba(255, 107, 107, 0.4) !important;
 }
 
-.video-container {
-    position: relative !important;
-    width: 100% !important;
-    max-width: 650px !important;
-    height: 350px !important;
-    margin: 1.5rem auto !important;
+.video-medium { 
+    height: 350px !important; 
+    max-width: 100% !important; 
+    width: 650px !important;
     border-radius: 16px !important;
-    overflow: hidden !important;
-    background: #000 !important;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
 }
 
-.video-container video {
-    width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
-    display: block !important;
-}
-
-.video-placeholder {
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    color: white !important;
-    font-size: 3rem !important;
-    z-index: 1 !important;
-}
-
-.video-loading {
-    animation: spin 1s linear infinite !important;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg) !important; }
-    100% { transform: rotate(360deg) !important; }
-}
-
 .header-gradient {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     border-radius: 24px !important;
@@ -139,10 +104,16 @@ body {
 
 @media (max-width: 768px) {
     .demo-btn { padding: 1rem 2rem !important; font-size: 1rem !important; }
-    .video-container { height: 280px !important; max-width: 100% !important; }
+    .video-medium { height: 280px !important; width: 100% !important; }
 }
 """
 
+def get_video_file(video_path):
+    """Returns the video file if it exists, otherwise returns None"""
+    if os.path.exists(video_path):
+        return video_path
+    return None
+
 with gr.Blocks() as demo:
     # Background Video
     gr.HTML("""
@@ -180,20 +151,18 @@ with gr.Blocks() as demo:
                     </a>
                     ''')
                     
-                    # Optimized Video Player with Streaming Support
-                    gr.HTML(f'''
-                    <div class="video-container">
-                        <video 
-                            controls 
-                            preload="metadata"
-                            style="width: 100%; height: 100%; object-fit: cover;"
-                            controlsList="nodownload"
-                        >
-                            <source src="{proj["video"]}" type="video/mp4">
-                            Your browser does not support the video tag.
-                        </video>
-                    </div>
-                    ''')
+                    # Video Component - using Gradio's built-in Video component
+                    video_file = get_video_file(proj["video"])
+                    if video_file:
+                        gr.Video(
+                            value=video_file,
+                            label="📹 Project Demo",
+                            height=350,
+                            interactive=False,
+                            elem_classes="video-medium"
+                        )
+                    else:
+                        gr.HTML(f"<div style='padding: 20px; text-align: center; color: #fff;'><p>📹 Video file not found: {proj['video']}</p></div>")
 
 demo.launch(
     share=True,