Merge pull request #70 from omalk98/issue-46

Added responsive view for video playback page
Curio-org · Oct 21, 2023 · c86d569 · c86d569
2 parents 729a88c + 1e47493
commit c86d569
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/Video/Player.tsx b/src/components/Video/Player.tsx
@@ -65,7 +65,6 @@ const Player = (props: any) => {
   };
 
   return (
-    <>
       <div className="youtube">
         <YouTube
           onPlaybackRateChange={playbackchange}
@@ -79,7 +78,6 @@ const Player = (props: any) => {
         />
         <TranslatedAudio />
       </div>
-    </>
   );
 };
 

diff --git a/src/components/Video/translatedAudio.tsx b/src/components/Video/translatedAudio.tsx
@@ -28,10 +28,10 @@ const TranslatedAudio = () => {
   };
 
   return (
-    <>
+    <div className="youtube">
       <Button onClick={gts}>Get Translated Audio</Button>
       {audio && <audio id="translatedAudio" src={audio} controls />}
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/Video/video.css b/src/components/Video/video.css
@@ -63,6 +63,7 @@
 
 .youtube {
   display: flex;
+  flex-wrap: wrap;
   margin-left: 30px;
   justify-content: space-around;
   align-items: center;
@@ -87,3 +88,8 @@
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
+
+.youtube iframe {
+  width: 100%;
+  aspect-ratio: 16/9;
+}