[Site] Play video only when visible (mlc-ai#423)

This PR fixes some small css issues on the landing page and also adds
feature to only play the video when it's visible to users.

site/_includes/hero.html

@@ -38,6 +38,8 @@ <h1>WebLLM: High-Performance In-Browser LLM Serving Engine.</h1>
 </section>
 
 <script>
+  (function() {
+
   function handlerIn(e) {
     $(this).addClass("expanded");
   }
@@ -47,4 +49,25 @@ <h1>WebLLM: High-Performance In-Browser LLM Serving Engine.</h1>
 
   $(".chat-link").hover(handlerIn, handlerOut);
   $(".github-link").hover(handlerIn, handlerOut);
+
+  var video = $("video")[0];
+  video.play().then((_) => {
+    let observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (
+              entry.intersectionRatio !== 1 &&
+              !video.paused
+          ) {
+            video.pause();
+          } else if (video.paused) {
+            video.play();
+          }
+        });
+      },
+        { threshold: 0.2 }
+    );
+    observer.observe(video);
+  });
+})()
 </script>

site/assets/css/hero.scss

@@ -156,9 +156,7 @@
         box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
         margin-top: 96px;
         width: 100%;
-        margin-left: -3rem;
         max-width: 1024px;
-
         aspect-ratio: 2292 / 1644;
 
         video {