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