new email welcome gif

middleware.js

@@ -26,6 +26,7 @@ export function middleware (request) {
     "font-src 'self' a.stacker.news",
     // we want to load images from everywhere but we can limit to HTTPS at least
     "img-src 'self' a.stacker.news m.stacker.news https: data: blob:",
+    "media-src 'self' a.stacker.news m.stacker.news",
     // Using nonces and strict-dynamic deploys a strict CSP.
     // see https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#strict-policy.
     // Old browsers will ignore nonce and strict-dynamic and fallback to host-based matching and unsafe-inline

pages/email.js

@@ -9,7 +9,10 @@ export default function Email () {
   return (
     <StaticLayout>
       <div className='p-4 text-center'>
-        <Image className='rounded-1 shadow-sm' width='320' height='223' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/hello.gif`} fluid />
+        <video width='640' height='302' loop autoPlay muted preload='auto' playsInline style={{ maxWidth: '100%' }}>
+          <source src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.mp4`} type='video/mp4' />
+          <Image className='rounded-1 shadow-sm' width='640' height='302' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.gif`} fluid />
+        </video>
         <h2 className='pt-4'>Check your email</h2>
         <h4 className='text-muted pt-2'>A sign in link has been sent to your email address</h4>
       </div>