fix: video loading from markdown

content/blog/basic-overview-of-packets-and-osi/index.md

@@ -36,7 +36,7 @@ For example, one of the ways that we can send and receive data is by, well, send
 
 It doesn't wait for a full message to be sent or provide many guidelines for how to send the data, it just tells them to "come on over".
 
-`video: title: "A series of cars driving across 3 lines at various speeds. This is meant to represent the data flow of binary data on a bus architecture": ./bus_animation.mp4`
+<video src="./bus_animation.mp4" title="A series of cars driving across 3 lines at various speeds. This is meant to represent the data flow of binary data on a bus architecture"></video>
 
 In this example, the bus icons are similar to binary data - either a one or a zero. They're able to _move as quickly as possible down a "lane" that is allocated for a specific stream of data to come through_. A collection of "lanes" is called a "bus" (which is where the name of the architecture comes from. I was just being silly by representing the binary data as buses in the video above). Your system, right now, is streaming through _**many**_ thousands of these busses to communicate between your CPU and I/O devices (like your keyboard or speakers) and tons of other things. They're _typically divided to send specific data through specific lanes (or busses)_, but outside of that, there's little high-level organization or concepts to think through.
 
@@ -70,7 +70,7 @@ While the "body" of your packet would contain the data you want the other party
 
 As a result, you might have a middleware packet handler that reads only the header of the packet in order to decide where to send the packet in question - much like the mail service you use will read the outside of the envelope to see where to send your letter
 
-`video: title: "An example of a small packet being sent to a small file server and a larger packet being sent to the large file server based on the data in the packet header": ./header_routing.mp4`
+<video src="./header_routing.mp4" title="An example of a small packet being sent to a small file server and a larger packet being sent to the large file server based on the data in the packet header"></video>
 
 # [It Takes A Village](https://en.wikipedia.org/wiki/It_takes_a_village) To Send A Letter {#osi-layers}
 

content/blog/draw-under-navbar-using-react-native/index.md

@@ -231,7 +231,7 @@ React.useEffect(() => {
 
 It supports dark mode switching, as many API levels as React Native does, and much more!
 
-`video: title: "A working dark switch with transparent navbar": ./android_10.mp4`
+<video src="./android_10.mp4" title="A working dark switch with transparent navbar"></video>
 
 # Conclusion
 

content/blog/github-copilot-breaks-bad-interviews/index.md

@@ -59,7 +59,7 @@ Well, it’s been a few years since I’ve refreshed my math skills, so they mig
 
 Let’s open VSCode and start implementing the function.
 
-`video: title: "GitHub Copilot generating a complete implementation of 'isPrime' from nothing more than the function name": ./gh_copilot_is_prime.mp4`
+<video src="./gh_copilot_is_prime.mp4" title="GitHub Copilot generating a complete implementation of 'isPrime' from nothing more than the function name"></video>
 
 Wow! I hadn’t even had a chance to add the parameters to the “isPrime” function before Copilot had already made a suggestion!
 

content/blog/hard-grids-and-baselines-android-design-fidelity/index.md

@@ -96,7 +96,7 @@ This means that designers, alongside developers, can force the bounds of a `Text
 
 This is something I’ve personally tested in an app I designed. [**Memoire**, a note-taking app](http://tiny.cc/getmemoire) for Android, is a 1:1 recreation of its mockups — for every single screen. This was made possible due to these APIs — *and because [**@sasikanth**](https://twitter.com/its\_sasikanth) is not confrontational* — since text is what almost always makes baseline alignment and hard grids impossible to implement in production.
 
-`video: title: "Near-perfect duplication of guidelines against Memoire's mockups and actual app": ./memoire_bounds_and_baselines.mp4`
+<video src="./memoire_bounds_and_baselines.mp4" title="Near-perfect duplication of guidelines against Memoire's mockups and actual app"></video>
 
 *Memoire’s TextViews are all customized using these APIs.*
 
@@ -118,7 +118,7 @@ As you might imagine, **if we want to keep our text aligned to a baseline grid,
 |--|--|
 |Applying `firstBaseline` and `lastBaseline` in styles allows you to know exactly what the distance between baselines is, without having to set them one by one to ensure they properly align to a `4dp` grid. | Without applying `firstBaseline` and `lastBaseline` in styles, you can’t detect what the default values are, so you are forced to apply these one by one to every `TextView` to ensure they align to a `4dp` grid. |
 
-`video: title: "A comparison of how text spacing is applied on iOS and Android": ./ios_vs_android.mp4`
+<video src="./ios_vs_android.mp4" title="A comparison of how text spacing is applied on iOS and Android"></video>
 
 The solution is to apply them in your `styles.xml` so that, when themed, the `TextView` is given the right text size, height, font, and baseline properties.
 
@@ -128,7 +128,7 @@ The solution is to apply them in your `styles.xml` so that, when themed, the `Te
 
 The overrides will take precedence to whatever value you set in your **`styles.xml`**, requiring you to hunt down occurrences until you can find a layout that was broken due to the change. Let’s look at an example:
 
-`video: title: "Allowing margin changes instead will let the text grow to it's expected sie without having issues with the baseline not being centered": ./dont_override.mp4`
+<video src="./dont_override.mp4" title="Allowing margin changes instead will let the text grow to it's expected sie without having issues with the baseline not being centered"></video>
 
 Implementing margins instead of overriding values also matches the way layouts work within Android Studio and design tools like Sketch and Figma. It also ensures that your layouts can scale well to different font sizes.