From 14460a7e493cb2814605a19f6ee0654b17249aa4 Mon Sep 17 00:00:00 2001
From: Andrew Healey <healeycodes@gmail.com>
Date: Wed, 22 Nov 2023 16:50:21 +0000
Subject: [PATCH] Add note on videos

---
 notes/1700564268239.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 notes/1700564268239.md

diff --git a/notes/1700564268239.md b/notes/1700564268239.md
new file mode 100644
index 0000000..054349a
--- /dev/null
+++ b/notes/1700564268239.md
@@ -0,0 +1,20 @@
+In [`9542c6da`](https://github.com/healeycodes/healeycodes.com/commit/9542c6da0a387b275c25b8f979c63c9688d8cbee) I added video support in posts on this website!
+
+My use-case is small looping .mp4 files without controls (without sound, so they can autoplay).
+
+```tsx
+<video
+  style={{ display: 'block', margin: '0 auto', maxWidth: '100%' }}
+  key={props.src}
+  controls={false}
+  autoPlay
+  playsInline
+  loop
+  muted
+  width={videoMetadata[props.src].width}
+  height={videoMetadata[props.src].height}>
+  <source src={`/posts/${id}/${props.src}`} type="video/mp4"></source>
+</video>
+```
+
+I get the video metadata from a library called [mp4box](https://www.npmjs.com/package/mp4box) during my build step.