From fbd5faa4e8efa57d7c1f8e820cae0cb104d1905c Mon Sep 17 00:00:00 2001
From: Omar Hussein <omarmohammad1951@gmail.com>
Date: Fri, 20 Oct 2023 12:25:51 -0400
Subject: [PATCH 1/2] added responsive view for video playback page

---
 src/components/Video/Player.tsx          | 2 --
 src/components/Video/translatedAudio.tsx | 4 ++--
 src/components/Video/video.css           | 1 +
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Video/Player.tsx b/src/components/Video/Player.tsx
index 763dad7..e650ed5 100644
--- 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
index a6f3201..675a315 100644
--- 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
index 7ac800b..9b5912d 100644
--- 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;

From 1e47493cba30e4d95aa593f13e32398183781bfc Mon Sep 17 00:00:00 2001
From: Omar Hussein <omarmohammad1951@gmail.com>
Date: Fri, 20 Oct 2023 20:17:24 -0400
Subject: [PATCH 2/2] Added responsive support for YouTube iframe

---
 src/components/Video/video.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Video/video.css b/src/components/Video/video.css
index 9b5912d..68ebed7 100644
--- a/src/components/Video/video.css
+++ b/src/components/Video/video.css
@@ -88,3 +88,8 @@
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
+	
+.youtube iframe {
+  width: 100%;
+  aspect-ratio: 16/9;
+}
\ No newline at end of file