docs: Embed video directly, copying formatting from blog (#15229)

Kyle Kelley created 2 years ago

Quick doc fix for formatting and display. 


![image](https://github.com/user-attachments/assets/5f869516-74d0-417a-bbeb-4b65f1961b12)

Release Notes:

- N/A

Change summary

docs/README.md   |  2 +-
docs/src/repl.md | 19 ++++++++++++++++---
2 files changed, 17 insertions(+), 4 deletions(-)

Detailed changes

docs/README.md

@@ -18,5 +18,5 @@ Putting binary assets such as images in the Git repository will bloat the reposi
 
 ## Internal notes:
 
-- We have a Cloudflare router called `docs-proxy`that intercepts requests to `zed.dev/docs` and forwards them to the "docs" Cloudflare Pages project.
+- We have a Cloudflare router called `docs-proxy` that intercepts requests to `zed.dev/docs` and forwards them to the "docs" Cloudflare Pages project.
 - CI uploads a new version to the Pages project from `.github/workflows/deploy_docs.yml` on every push to `main`.

docs/src/repl.md

@@ -4,9 +4,22 @@
 
 Bring the power of [Jupyter kernels](https://docs.jupyter.org/en/latest/projects/kernels.html) to your editor! The built-in REPL for Zed allows you to run code interactively in your editor similarly to a notebook with your own text files.
 
-![Run Python Block by Block](https://customer-snccc0j9v3kfzkif.cloudflarestream.com/aec66e79f23d6d1a0bee5e388a3f17cc/downloads/default.mp4)
-
-![Markdown documents become notebooks](https://zed.dev/img/post/repl/typescript-deno-kernel-markdown.png)
+<figure style="overflow: hidden; border-top-left-radius: 2px; border-top-right-radius: 2px;">
+    <video loop controls playsinline>
+        <source
+            src="https://customer-snccc0j9v3kfzkif.cloudflarestream.com/aec66e79f23d6d1a0bee5e388a3f17cc/downloads/default.mp4"
+            type='video/webm; codecs="vp8.0, vorbis"'
+        />
+        <source
+            src="https://customer-snccc0j9v3kfzkif.cloudflarestream.com/aec66e79f23d6d1a0bee5e388a3f17cc/downloads/default.mp4"
+            type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'
+        />
+        <source
+          src="https://zed.dev/img/post/repl/typescript-deno-kernel-markdown.png"
+          type="image/png"
+        />
+    </video>
+</figure>
 
 ## Installation