v1.6.0/replace gifs with mp4

website/index.html

@@ -34,11 +34,12 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <title>Watch Party</title>
   </head>
   <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script>
-  </script>
   <script>
     window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+    function gtag() {
+      dataLayer.push(arguments);
+    }
     gtag('js', new Date());
 
     gtag('config', 'UA-87498806-2');
@@ -66,7 +67,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div data-beta-support class="supported-logo" id="googleplay"></div>
         <div data-beta-support class="supported-logo" id="crunchyroll"></div>
       </div>
-      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button duplicate">
+      <a
+        data-font="sans-bold"
+        href="https://request.chromewatchparty.com"
+        class="link-button duplicate"
+      >
         Get Chrome Extension
       </a>
       <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button">
@@ -76,7 +81,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <div class="features">
       <p data-font="sans-bold" class="title subtitle">FEATURES</p>
       <div class="feature-card">
-        <div class="feature-icon" id="sync"></div>
+        <div class="feature-icon" id="sync">
+          <video src="./media/features/Sync.mp4" />
+        </div>
         <p data-font="sans" class="feature-text">
           Watch Party syncs play, pause and timestamp.
         </p>
@@ -132,7 +139,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">TO BE OR NOT TO BE</h4>
-            <p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. The sidebar is now resizeable, and now supports having access to Watch Party in fullscreen. (Use the fullscreen button in the sidebar)</p>  
+            <p data-font="sans">
+              Watch Party is built to not be in your way. There when you need it, gone when you
+              don't. The sidebar is now resizeable, and now supports having access to Watch Party in
+              fullscreen. (Use the fullscreen button in the sidebar)
+            </p>
           </div>
         </div>
       </div>
@@ -159,7 +170,10 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">Stay in control</h4>
-            <p data-font="sans">Find your settings by clicking on title card (when you're in a party) or in the settings panel (when you're creating or joining) </p>  
+            <p data-font="sans">
+              Find your settings by clicking on title card (when you're in a party) or in the
+              settings panel (when you're creating or joining)
+            </p>
           </div>
         </div>
       </div>
@@ -174,18 +188,19 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
               <div id="tm">
                 <div id="tt">
                   <span>12:00:00 PM</span>
-                  <div id="ri"></div></div>
+                  <div id="ri"></div>
+                </div>
                 <p>Hiya buddy!</p>
               </div>
             </div>
             <div id="ti" class="mm">
               <div id="tn">AYUSHYA</div>
-              <div id="tr">Hiya buddy!
+              <div id="tr">Hiya buddy!</div>
-              </div>
               <div id="tm">
                 <div id="tt">
                   <span>12:00:00 PM</span>
-                  <div id="ri"></div></div>
+                  <div id="ri"></div>
+                </div>
                 <p>OH GOD NO! PLEASE GOD NO! NO!</p>
               </div>
             </div>
@@ -202,7 +217,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             <div id="ti" class="mm">
               <div id="tn">SOMEONE</div>
               <div id="tr">
-                <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" /></div>
+                <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" />
+              </div>
               <div id="tm">
                 <div id="tt">
                   <span>12:00:00 PM</span>
@@ -211,19 +227,20 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
                 <p>Let's watch The Office</p>
               </div>
             </div>
-
           </div>
         </div>
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">FULL FEATURED CHAT</h4>
-            <p data-font="sans">A brand new, completely revamped chat user interface, now has replies, shows pending messages, and improves the Giphy GIF picker</p>  
+            <p data-font="sans">
+              A brand new, completely revamped chat user interface, now has replies, shows pending
+              messages, and improves the Giphy GIF picker
+            </p>
           </div>
         </div>
       </div>
 
       <div class="pop-feature">
-
         <div id="title-card-container">
           <div id="title-card">
             <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
@@ -236,17 +253,21 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             <h6 data-font="sans" id="title-card-tagline">USERS ON CALL</h6>
             <p data-font="sans" id="call-user-chip">Ayushya</p>
             <p data-font="sans" id="call-user-chip" class="not-me-user-chip">Someone</p>
-            <p data-font="sans" id="call-user-chip" class="not-me-user-chip">Won't Stop Talking <input type="range" value="2" min="0" max="10"></p>
+            <p data-font="sans" id="call-user-chip" class="not-me-user-chip">
+              Won't Stop Talking <input type="range" value="2" min="0" max="10" />
+            </p>
           </div>
         </div>
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">MADE FOR YOU & YOUR GANG</h4>
-            <p data-font="sans">See who's in your party, get on a call with your party, and volume control for the person who just won't stop talking. </p>
+            <p data-font="sans">
+              See who's in your party, get on a call with your party, and volume control for the
+              person who just won't stop talking.
+            </p>
           </div>
         </div>
       </div>
-
     </div>
     <footer data-font="sans">
       <p class="title built-with">