Merge branch 'add-video' into 'master'

Add video

See merge request covid-19/frontend!133

src/app/pages/explorer-page/explorer-page.component.html

@@ -369,7 +369,7 @@
       <header class="card-header">
         <p class="card-header-title">
           <span class="icon">
-            <i class="fas fa-filter" aria-hidden="true"></i>
+            <i class="fas fa-tasks" aria-hidden="true"></i>
           </span>
           Tasks ({{analysis.tasks.length}})
         </p>

src/app/pages/home-page/home-page.component.html

@@ -6,10 +6,17 @@
         <img src="assets/covex_logo.png" style="height: 233px; width: 600px">
       </div>
 
-      <div class="has-text-centered video-box">
-        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/H9pbYQFlt6U" frameborder="0"
-                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-        </iframe>
+      <div class="video-container">
+        <div class="has-text-centered video-box">
+          <iframe width="560" height="315" src="https://www.youtube.com/embed/fPkY5ep2mjk" frameborder="0"
+                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+          </iframe>
+        </div>
+        <div class="has-text-centered video-box">
+          <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/H9pbYQFlt6U" frameborder="0"
+                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+          </iframe>
+        </div>
       </div>
 
       <div class="button-box is-hidden-mobile">

src/app/pages/home-page/home-page.component.scss

@@ -20,17 +20,23 @@ div.scroll {
   }
 }
 
-.video-box {
-  margin-top: 40px;
+.button-box {
+  maring-top: 40px;
   margin-bottom: 40px;
-  width: 100%;
-
-  iframe {
-    max-width: 100%;
-  }
 }
 
-.button-box {
-  maring-top: 40px;
+.video-container {
+  margin-top: 40px;
   margin-bottom: 40px;
+
+  .video-box {
+    display: inline-block;
+    width: 100%;
+    max-width: 560px;
+    margin: 5px;
+
+    iframe {
+      max-width: 100%;
+    }
+  }
 }