Add poster images and set preload to none for videos (#60)

* dd poster images and set preload to none for videos

* Missed one

* Add width and height to videos

* Retake images

* Retake as PNGs using export Node

* Add controls back

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>
 

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>

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>.

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>
 

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);

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>