diff --git a/public/video/anchoring.png b/public/video/anchoring.png
new file mode 100644
index 0000000..782da32
Binary files /dev/null and b/public/video/anchoring.png differ
diff --git a/public/video/cross-document-view-transitions.png b/public/video/cross-document-view-transitions.png
new file mode 100644
index 0000000..eae4f6b
Binary files /dev/null and b/public/video/cross-document-view-transitions.png differ
diff --git a/public/video/field-sizing.png b/public/video/field-sizing.png
new file mode 100644
index 0000000..06f7cfb
Binary files /dev/null and b/public/video/field-sizing.png differ
diff --git a/public/video/paint-order.png b/public/video/paint-order.png
new file mode 100644
index 0000000..529f720
Binary files /dev/null and b/public/video/paint-order.png differ
diff --git a/public/video/snap-change.png b/public/video/snap-change.png
new file mode 100644
index 0000000..9226250
Binary files /dev/null and b/public/video/snap-change.png differ
diff --git a/public/video/snap-changing.png b/public/video/snap-changing.png
new file mode 100644
index 0000000..5291d1e
Binary files /dev/null and b/public/video/snap-changing.png differ
diff --git a/src/components/video.astro b/src/components/video.astro
index 209c10f..4a32f29 100644
--- a/src/components/video.astro
+++ b/src/components/video.astro
@@ -3,9 +3,11 @@ interface Props {
   src: string;
   width?: number;
   height?: number;
+  poster?: string;
+  preload?: string;
 }
 
-const { src, width = 720, height = 480 } = Astro.props;
+const { src, width = 720, height = 480, poster = "", preload = "metadata" } = Astro.props;
 ---
 
 <video
@@ -16,7 +18,10 @@ const { src, width = 720, height = 480 } = Astro.props;
   muted
   loop
   playsinline
-  preload="metadata">
+  preload={preload}
+  poster={poster}
+  onmouseenter="event.target.setAttribute('preload','metadata')"
+  style=`aspect-ratio: ${width} / ${height};`>
   Your browser does not support video
 </video>
 
diff --git a/src/features/components/anchor-positioning.astro b/src/features/components/anchor-positioning.astro
index e463097..6c4e6f9 100644
--- a/src/features/components/anchor-positioning.astro
+++ b/src/features/components/anchor-positioning.astro
@@ -61,7 +61,7 @@ const slug = slugify(title);
 
   <p>The <code>position-area</code> property offers all sorts of options! The demo uses the logical property value <code>block-end</code>, but there's <code>center</code >, <code>button</code>, and tons more. Una made a GUI to help you visualize the options:</p>
 
-  <Video src="./video/anchoring.mp4" />
+  <Video src="./video/anchoring.mp4" width={1280} height={720} poster="./video/anchoring.png" preload="none" />
 
   <div class="resources">
     <p>
diff --git a/src/features/components/field-sizing.astro b/src/features/components/field-sizing.astro
index 35839df..27e73e5 100644
--- a/src/features/components/field-sizing.astro
+++ b/src/features/components/field-sizing.astro
@@ -36,7 +36,7 @@ const slug = slugify(title);
     and <code>input</code> can now shrink to fit the size of the placeholder or
     content value.
   </p>
-  <Video src="./video/field-sizing.mp4" />
+  <Video src="./video/field-sizing.mp4" width={1242} height={698} poster="./video/field-sizing.png" preload="none" />
   <p>
     The following demo offers a side by side comparison of how inputs behave
     without <code>field-sizing</code> and with <code>field-sizing</code>.
diff --git a/src/features/developerexperience/paint-order.astro b/src/features/developerexperience/paint-order.astro
index 929c8f1..b4d02a4 100644
--- a/src/features/developerexperience/paint-order.astro
+++ b/src/features/developerexperience/paint-order.astro
@@ -25,7 +25,7 @@ const slug = slugify(title);
 
   <p>The following video shows how the result of the text stroke is undesirable if the text is filled white and then given a black stroke. Switch those around, so the stroke is drawn first and then filled, and the result is quite nice!</p>
 
-  <Video src="./video/paint-order.mp4" />
+  <Video src="./video/paint-order.mp4" width={1470} height={828} poster="./video/paint-order.png" preload="none" />
   
   <p>The CSS to control this is one line. Set the <code>paint-order</code> to draw the stroke before the fill by specifying those keywords in that order.</p>
 
diff --git a/src/features/interactions/scroll-snap-events.astro b/src/features/interactions/scroll-snap-events.astro
index 4678db1..c7000fd 100644
--- a/src/features/interactions/scroll-snap-events.astro
+++ b/src/features/interactions/scroll-snap-events.astro
@@ -33,11 +33,11 @@ const slug = slugify(title);
   <p>The <code>scrollsnapchange</code> event fires at a similar moment as <a  href="https://developer.chrome.com/blog/scrollend-a-new-javascript-event"><code>scrollend</code></a>, when scroll has rested and the user has stopped
   interacting with the scroller.</p>
 
-  <Video src="./video/snap-change.mp4" />
+  <Video src="./video/snap-change.mp4" width={1920} height={1082} poster="./video/snap-change.png" preload="none" />
 
   <p>The <code>scrollsnapchanging</code>event is eager to fire, and calls the callback the moment the scroller has a new snap target. This is useful for instant UX feedback, providing a mechanism for immediate visual updates based on the user's interaction.</p>
 
-  <Video src="./video/snap-changing.mp4" />
+  <Video src="./video/snap-changing.mp4" width={1920} height={1082} poster="./video/snap-changing.png" preload="none" />
 
   <Code lang="js" theme="css-variables" code={`scroller.addEventListener('scrollsnapchanging', event=> {
     console.log(event.snapTargetBlock);
diff --git a/src/features/interactions/view-transitions-mpa.astro b/src/features/interactions/view-transitions-mpa.astro
index f3c8226..269a60b 100644
--- a/src/features/interactions/view-transitions-mpa.astro
+++ b/src/features/interactions/view-transitions-mpa.astro
@@ -37,7 +37,7 @@ const slug = slugify(title);
   </p>
 
   <figure>
-    <Video src="./video/cross-document-view-transitions.mp4" />
+    <Video src="./video/cross-document-view-transitions.mp4" width={2160} height={1216} poster="./video/cross-document-view-transitions.png" preload="none" />
     <figcaption>
       Recording of the <a href="https://view-transitions.chrome.dev/stack-navigator/mpa/">“Stack Navigator” demo that uses cross-document view transitions</a>
     </figcaption>