From 0d2a8d78a5386e3a00a18434a789cc3d31b256c4 Mon Sep 17 00:00:00 2001
From: oussama02 <oussamaosman02@gmail.com>
Date: Thu, 6 Oct 2022 17:56:37 +0200
Subject: [PATCH] Adding video-wrapper for mobile fiendly preview of the
 youtube video

---
 website/src/pages/index.js          | 2 +-
 website/src/pages/styles.module.css | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index d5780d2449..a702635abf 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -29,7 +29,7 @@ function VideoContainer() {
   return (
     <div className="container text--center margin-bottom--xl margin-top--lg">
       <div className="row">
-        <div className="col">
+        <div className={`${styles.ifr-wrapper} col`}>
           <h2>Check it out in the intro video</h2>
             <iframe
               width="560"
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 61732abc38..67af329c37 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -53,3 +53,11 @@ div[class^="announcementBarContent"] a:hover {
     padding: 6px 30px;
   }
 }
+
+ /* YouTube video well display in smartphones*/
+ @media only screen and (max-width: 580px) {
+  .ifr-wrapper {
+    width: 90vw;
+    height: 50.63vw;
+  }
+ }
\ No newline at end of file