Update video extensions from .mp4 to .webm

Co-Authored-By: Myles Scolnick <myles@marimo.io>

docs/faq.md

@@ -90,7 +90,7 @@ synchronized with the Python kernel: no callbacks, no observers, no manually
 re-running cells.
 
 <p align="center">
-<video autoplay controls loop width="600px" align="center" src="/_static/faq-marimo-ui.mp4">
+<video autoplay controls loop width="600px" align="center" src="/_static/faq-marimo-ui.webm">
 </video>
 </p>
 

docs/guides/interactivity.md

@@ -7,7 +7,7 @@ global variable automatically runs all cells that reference it.**
 
 <div align="center">
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/readme-ui.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/readme-ui.webm">
 </video>
 </figure>
 </div>
@@ -75,7 +75,7 @@ value on form submission.
 
 <div align="center">
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/readme-ui-form.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/readme-ui-form.webm">
 </video>
 <figcaption>Use a form to gate value updates on submission</figcaption>
 </figure>

docs/guides/outputs.md

@@ -7,7 +7,7 @@ documented in the [API reference](../api/index.md).
 
 <div align="center">
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/outputs.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/outputs.webm">
 </video>
 </figure>
 </div>
@@ -74,7 +74,7 @@ top right.
 
 <div align="center">
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-markdown-toggle.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-markdown-toggle.webm">
 </video>
 <figcaption>marimo is pure Python, even when you're using markdown.</figcaption>
 </figure>

docs/guides/state.md

@@ -42,7 +42,7 @@ But sometimes, you might want interactions to mutate state:
 
 <div align="center" style="margin-top:2rem; margin-bottom:2rem">
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-state-task-list.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-state-task-list.webm">
 </video>
 </figure>
 <figcaption>A proof-of-concept TODO list made using state.</figcaption>
@@ -253,7 +253,7 @@ The next few cells use state to create a todo list.
 
 <div align="center">
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-state-task-list.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-state-task-list.webm">
 </video>
 </figure>
 </div>

docs/guides/working_with_data/dataframes.md

@@ -17,7 +17,7 @@ marimo lets you page through, search, sort, and filter dataframes, making it
 extremely easy to get a feel for your data.
 
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-df.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-df.webm">
 </video>
 <figcaption>marimo brings dataframes to life.</figcaption>
 </figure>
@@ -86,7 +86,7 @@ notebook.
 
 <div align="center">
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-dataframe-transform.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-dataframe-transform.webm">
 </video>
 <figcaption>Build transformations using a GUI</figcaption>
 </figure>
@@ -201,7 +201,7 @@ dataframe_.
 
 <div align="center">
 <figure>
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-dataframe-table.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-dataframe-table.webm">
 </video>
 <figcaption>Select rows in a table, get them back as a dataframe</figcaption>
 </figure>

docs/guides/working_with_data/plotting.md

@@ -69,7 +69,7 @@ automatically made available as Pandas dataframes in Python._
 
 <div align="center">
 <figure>
-<video autoplay controls loop width="600px" align="center" src="/_static/docs-intro.mp4">
+<video autoplay controls loop width="600px" align="center" src="/_static/docs-intro.webm">
 </video>
 </figure>
 </div>

docs/index.md

@@ -75,7 +75,7 @@ reference its variables, eliminating the error-prone task of manually
 re-running cells. Delete a cell and marimo scrubs its variables from program
 memory, eliminating hidden state.
 
-<video autoplay controls loop width="700px" align="center" src="/_static/reactive.mp4">
+<video autoplay controls loop width="700px" align="center" src="/_static/reactive.webm">
 </video>
 
 <a name="expensive-notebooks"></a>
@@ -94,14 +94,14 @@ transformers](api/inputs/dataframe.md), and [chat
 interfaces](api/inputs/chat.md), and the cells that
 use them are automatically re-run with their latest values.
 
-<video autoplay controls loop width="700px" align="center" src="/_static/readme-ui.mp4">
+<video autoplay controls loop width="700px" align="center" src="/_static/readme-ui.webm">
 </video>
 
 **Interactive dataframes.** [Page through, search, filter, and
 sort](./guides/working_with_data/dataframes.md)
 millions of rows blazingly fast, no code required.
 
-<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-df.mp4">
+<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-df.webm">
 </video>
 
 **Performant runtime.** marimo runs only those cells that need to be run by
@@ -158,7 +158,7 @@ code hidden and uneditable:
 marimo run your_notebook.py
 ```
 
-<video autoplay controls loop width="450px" align="center" src="/_static/docs-model-comparison.mp4" style="border-radius: 8px">
+<video autoplay controls loop width="450px" align="center" src="/_static/docs-model-comparison.webm" style="border-radius: 8px">
 </video>
 
 **Execute as scripts.** Execute a notebook as a script at the
@@ -194,7 +194,7 @@ marimo is easy to get started with, with lots of room for power users.
 For example, here's an embedding visualizer made in marimo
 ([video](https://marimo.io/videos/landing/full.mp4)):
 
-<video autoplay controls loop width="700px" align="center" src="/_static/embedding.mp4">
+<video autoplay controls loop width="700px" align="center" src="/_static/embedding.webm">
 </video>
 
 Check out our [guides](guides/index.md), our [example