Compress videos and loop them

Author: reinink

src/pages/blog/2022-12-14-protocol-api-documentation-template/animated-sidebar.mp4

@@ -37,21 +37,21 @@ We've got sticky code blocks that stay in view as you scroll through the request
 
 <div className="relative rounded-lg overflow-hidden">
   <div className="absolute inset-0 rounded-lg ring-1 ring-inset ring-slate-900/10 pointer-events-none"></div>
-  <video src={stickyCodeBlocks} controls className="block m-0" />
+  <video src={stickyCodeBlocks} autoPlay playsInline loop muted className="block m-0" />
 </div>
 
 There's also this beautiful hover effect on the homepage cards — it follows your mouse cursor with this gradient glow that uncovers a subtle background pattern:
 
 <div className="relative rounded-lg overflow-hidden">
   <div className="absolute inset-0 rounded-lg ring-1 ring-inset ring-slate-900/10 pointer-events-none"></div>
-  <video src={hoveringCards} controls className="block m-0" />
+  <video src={hoveringCards} autoPlay playsInline loop muted className="block m-0" />
 </div>
 
 My favorite detail though has to be the sidebar navigation, which tracks the visible page content but using a sort of "minimap" strategy, where _all_ visible page sections are highlighted:
 
 <div className="relative rounded-lg overflow-hidden">
   <div className="absolute inset-0 rounded-lg ring-1 ring-inset ring-slate-900/10 pointer-events-none"></div>
-  <video src={animatedSidebar} controls className="block m-0" />
+  <video src={animatedSidebar} autoPlay playsInline loop muted className="block m-0" />
 </div>
 
 Watching this animate as you scroll through the page is really a sight to behold — props to [Framer Motion](https://www.framer.com/motion/) for doing the heavy lifting here as usual. Even if I absolutely hated React I'm pretty sure I'd still use it just to use this library, it's really that good.