Merge pull request #408 from code-reaper08/master

Demo videos in homepage not loading on mobile

Author: pcottle

assets/launch_page.css

@@ -280,3 +280,20 @@ hr {
     padding-right: 0px;
   }
 }
+/* Regarding video demo missing */
+.mobile-show{
+  display: none;
+}
+.mobile-show img {
+  width:300px;
+  height: auto;
+}
+
+@media only screen
+    and (min-device-width : 320px)
+    and (max-device-width : 480px){ 
+      .mobile-show {display: inline;
+                    width: 50pxpx;
+                    height: 50px;}
+      .mobile-hide {display: none;}
+  }

index.html

@@ -102,8 +102,12 @@ <h2>Any Input</h2>
           <p><a class="btn btn-success" href="https://github.com/facebook/pathpicker/" role="button">More on GitHub</a></p>
         </div>
         <div class="asciiDemo col-md-6">
-          <script type="text/javascript" src="https://asciinema.org/a/19519.js" id="asciicast-19519" async>
-          </script>
+          <!-- <script type="text/javascript" src="https://asciinema.org/a/19519.js" id="asciicast-19519" async> -->
+          <!-- </script>   -->
+          <a class="mobile-show" href="https://asciinema.org/a/19519" target="_blank"><img src="https://asciinema.org/a/19519.png" /></a>
+          <div class="mobile-hide">
+          <script id="asciicast-19519" src="https://asciinema.org/a/19519.js" async></script>
+          </div>
         </div>
       </div>
       <hr>
@@ -121,7 +125,11 @@ <h2>Arbitrary Commands</h2>
           <a class="btn btn-success" href="https://github.com/facebook/pathpicker/" role="button">More on GitHub</a>
         </div>
         <div class="asciiDemo col-md-6">
-          <script type="text/javascript" src="https://asciinema.org/a/19520.js" id="asciicast-19520" async></script>
+          <!-- <script type="text/javascript" src="https://asciinema.org/a/19520.js" id="asciicast-19520" async></script> -->
+          <a class="mobile-show" href="https://asciinema.org/a/19520" target="_blank"><img src="https://asciinema.org/a/19520.png" /></a>
+          <div class="mobile-hide">
+          <script id="asciicast-19520" src="https://asciinema.org/a/19520.js" async></script>
+          </div>
         </div>
       </div>
     </div>