Higher quality video background for universe hero (#264)

https://www.loom.com/share/64db9edca29146259d9186f63d524bb0?sid=9dc97c0b-9e6c-45f4-add1-d8f5fcf11a24

I uploaded a high quality version of the background video to CloudFlare
so we can load it in using adaptive streaming. So the quality of the
video will adjust based on the user's internet connection.

I had to add an `hls` loader script since Safari is the only browser
that can support hls natively at this time.

I also added `transform: scale(1.01);` to the video because the source
video had a black border, this is just a hacky way to fix that without
asking for another video to be rendered, I think its fine.

_includes/head.html

@@ -31,7 +31,7 @@
 
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/githubIssues.css" />
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/downloads.css" />
-<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/universe.css?v=3" />
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/universe.css?v=4" />
 
 <link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/assets/favicon/apple-icon-57x57.png" />
 <link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/assets/favicon/apple-icon-60x60.png" />
@@ -140,3 +140,5 @@
 
   gtag('config', 'G-61WER6XQRY');
 </script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.14/hls.min.js"></script>

assets/css/universe.css

@@ -62,7 +62,8 @@
   overflow: hidden;
 }
 
-#universe video {
+#universe video,
+#universe iframe {
   position: absolute;
   top: 0;
   left: 0;
@@ -72,6 +73,8 @@
   z-index: 0;
   pointer-events: none;
 
+  transform: scale(1.01);
+
   @media only screen and (max-width: 767px) {
     top: 65px;
   }

index.html

@@ -42,9 +42,28 @@
       </a>
     </div>
 
+    <video muted autoplay playsinline id="universe-video" />
+
+    <script>
+      const video = document.getElementById('universe-video');
+      const videoSrc = 'https://customer-o6ocjyfui1ltpm5h.cloudflarestream.com/160cdec826b66920274b6eae8fe56534/manifest/video.m3u8';
+
+      if (Hls.isSupported()) {
+        const hls = new Hls();
+        hls.loadSource(videoSrc);
+        hls.attachMedia(video);
+      }
+      // For browsers with native HLS support (Safari)
+      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = videoSrc;
+      }
+    </script>
+
+    <!--
     <video muted autoplay playsinline poster="{{ site.baseurl }}/assets/img/universe/background.png">
       <source src="{{ site.baseurl }}/assets/vid/universe-background.mp4" type="video/mp4" />
     </video>
+    -->
   </div>
 
   <script>
@@ -56,7 +75,7 @@
             $element.addClass('uanim-animated');
           }, index * 20);
         });
-      }, 3600);
+      }, 4200);
 
       setTimeout(function () {
         $('#universe .uanim').each(function (index) {
@@ -65,7 +84,7 @@
             $element.addClass('uanim-animated');
           }, index * 100);
         });
-      }, 3200);
+      }, 3600);
 
       setTimeout(function () {
         $('#universe .uanim-fade').each(function (index) {
@@ -74,7 +93,7 @@
             $element.addClass('uanim-animated');
           }, index * 200);
         });
-      }, 4200);
+      }, 4600);
     });
   </script>