Update video links and add command palette video

Author: reinink

src/pages/blog/2022-12-15-protocol-api-documentation-template/command-palette.png

@@ -1,5 +1,4 @@
 import { adamwathan } from '@/authors'
-import commandPalette from './command-palette.png'
 import convertkit from './convertkit.png'
 import darkmode from './darkmode.png'
 import documentation from './documentation.png'
@@ -34,21 +33,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="https://assets.tailwindcss.com/blog/2022-12-14-protocol-api-documentation-template/sticky-code-blocks.mp4?1" autoPlay playsInline loop muted className="block m-0" />
+  <video src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/sticky-code-blocks.mp4" 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="https://assets.tailwindcss.com/blog/2022-12-14-protocol-api-documentation-template/hovering-cards.mp4?1" autoPlay playsInline loop muted className="block m-0" />
+  <video src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/hovering-cards.mp4" 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="https://assets.tailwindcss.com/blog/2022-12-14-protocol-api-documentation-template/animated-sidebar.mp4?1" autoPlay playsInline loop muted className="block m-0" />
+  <video src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/animated-sidebar.mp4" 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.
@@ -199,8 +198,9 @@ We love Algolia for documentation search, and we use it for the Tailwind CSS web
 
 We've wired it up for Protocol as well, but this time using Algolia's headless [autocomplete library](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/) so we had total control of the search UI:
 
-<div className="my-8">
-  <img src={commandPalette.src} alt="Command palette with Algolia DocSearch integration" />
+<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="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/command-palette.mp4" autoPlay playsInline loop muted className="block m-0" />
 </div>
 
 The nice thing about this approach is we can use regular old utility classes to style everything instead of writing custom CSS to style an already-styled widget, which just feels a lot more _right_ in a Tailwind CSS project.