Layout of VideoContent.tsx and PlaylistContent.tsx changed to maximize Video Player size while maintaining aspect ratio.

Forced aspect ratio of videos to 16 / 9

src/components/Playlists/Playlists.tsx

@@ -21,7 +21,7 @@ export const Playlists = ({
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        maxWidth: "25vw",
+        maxHeight: "30.94vw",
       }}
     >
       <CardContentContainerComment

src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx

@@ -447,24 +447,34 @@ export const PlaylistContent = () => {
             <Box
               sx={{
                 display: "grid",
-                gridTemplateColumns: "55vw 30vw",
+                gridTemplateColumns: "55vw 35vw",
                 width: "100vw",
-                gap: "5vw",
+                gap: "3vw",
               }}
             >
               {videoReference && (
-                <VideoPlayer
-                  name={videoReference?.name}
-                  service={videoReference?.service}
-                  identifier={videoReference?.identifier}
-                  user={channelName}
-                  jsonId={id}
-                  poster={videoCover || ""}
-                  nextVideo={nextVideo}
-                  onEnd={onEndVideo}
-                  autoPlay={doAutoPlay}
-                  ref={containerRef}
-                />
+                <Box
+                  sx={{
+                    aspectRatio: "16/9",
+                  }}
+                >
+                  <VideoPlayer
+                    name={videoReference?.name}
+                    service={videoReference?.service}
+                    identifier={videoReference?.identifier}
+                    user={channelName}
+                    jsonId={id}
+                    poster={videoCover || ""}
+                    nextVideo={nextVideo}
+                    onEnd={onEndVideo}
+                    autoPlay={doAutoPlay}
+                    ref={containerRef}
+                    videoStyles={{
+                      videoContainer: { aspectRatio: "16 / 9" },
+                      video: { aspectRatio: "16 / 9" },
+                    }}
+                  />
+                </Box>
               )}
               {playlistData && (
                 <Playlists

src/pages/ContentPages/VideoContent/VideoContent.tsx

@@ -402,18 +402,29 @@ export const VideoContent = () => {
       <VideoPlayerContainer
         sx={{
           width: "55vw",
+          aspectRatio: "16/9",
         }}
       >
         {videoReference ? (
-          <VideoPlayer
-            name={videoReference?.name}
-            service={videoReference?.service}
-            identifier={videoReference?.identifier}
-            user={channelName}
-            jsonId={id}
-            poster={videoCover || ""}
-            ref={containerRef}
-          />
+          <Box
+            sx={{
+              aspectRatio: "16/9",
+            }}
+          >
+            <VideoPlayer
+              name={videoReference?.name}
+              service={videoReference?.service}
+              identifier={videoReference?.identifier}
+              user={channelName}
+              jsonId={id}
+              poster={videoCover || ""}
+              ref={containerRef}
+              videoStyles={{
+                videoContainer: { aspectRatio: "16 / 9" },
+                video: { aspectRatio: "16 / 9" },
+              }}
+            />
+          </Box>
         ) : (
           <img src={DeletedVideo} width={"100%"} height={"100%"} />
         )}