From 9ddba29b00e72e84f290f20348bd906e78e67624 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Thu, 27 Feb 2025 10:21:45 +0100
Subject: [PATCH] feat: Improve Video Activity Component Responsiveness and
 Styling

---
 .../Objects/Activities/Video/Video.tsx        | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/apps/web/components/Objects/Activities/Video/Video.tsx b/apps/web/components/Objects/Activities/Video/Video.tsx
index e523f43b..2f8a707b 100644
--- a/apps/web/components/Objects/Activities/Video/Video.tsx
+++ b/apps/web/components/Objects/Activities/Video/Video.tsx
@@ -15,37 +15,41 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
   }, [activity, org])
 
   return (
-    <div>
+    <div className="w-full max-w-full px-2 sm:px-4">
       {activity && (
         <>
           {activity.activity_sub_type === 'SUBTYPE_VIDEO_HOSTED' && (
-            <div className="m-8 bg-zinc-900 rounded-md mt-14">
-              <video
-                className="rounded-lg w-full h-[500px]"
-                controls
-                src={getActivityMediaDirectory(
-                  org?.org_uuid,
-                  course?.course_uuid,
-                  activity.activity_uuid,
-                  activity.content?.filename,
-                  'video'
-                )}
-              ></video>
+            <div className="my-3 md:my-5 w-full">
+              <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-sm sm:shadow-none">
+                <video
+                  className="w-full h-full object-cover"
+                  controls
+                  src={getActivityMediaDirectory(
+                    org?.org_uuid,
+                    course?.course_uuid,
+                    activity.activity_uuid,
+                    activity.content?.filename,
+                    'video'
+                  )}
+                ></video>
+              </div>
             </div>
           )}
           {activity.activity_sub_type === 'SUBTYPE_VIDEO_YOUTUBE' && (
-            <div>
-              <YouTube
-                className="rounded-md overflow-hidden m-8 bg-zinc-900  mt-14"
-                opts={{
-                  width: '1300',
-                  height: '500',
-                  playerVars: {
-                    autoplay: 0,
-                  },
-                }}
-                videoId={videoId}
-              />
+            <div className="my-3 md:my-5 w-full">
+              <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-sm sm:shadow-none">
+                <YouTube
+                  className="w-full h-full"
+                  opts={{
+                    width: '100%',
+                    height: '100%',
+                    playerVars: {
+                      autoplay: 0,
+                    },
+                  }}
+                  videoId={videoId}
+                />
+              </div>
             </div>
           )}
         </>