docs: play videos inline for mobile compat (#3720)

Our docs aren't loading properly on mobile. Videos sometimes play
fullscreen automatically, and also many pages fail to load entirely.
Adding `playsinline` to `video` elements may help.

https://css-tricks.com/what-does-playsinline-mean-in-web-video/

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 muted loop width="600px" align="center" src="/_static/faq-marimo-ui.webm">
+<video autoplay muted loop playsinline width="600px" align="center" src="/_static/faq-marimo-ui.webm">
 </video>
 </p>
 

docs/getting_started/key_concepts.md

@@ -52,7 +52,7 @@ variables defined by that cell._ This is reactive execution.
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="600px" align="center" src="/_static/reactive.webm">
+<video autoplay muted loop playsinline width="600px" align="center" src="/_static/reactive.webm">
 </video>
 </figure>
 </div>
@@ -107,7 +107,7 @@ other marimo elements to build rich composite outputs:
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="600px" align="center" src="/_static/outputs.webm">
+<video autoplay muted loop playsinline width="600px" align="center" src="/_static/outputs.webm">
 </video>
 </figure>
 </div>
@@ -139,7 +139,7 @@ that can wrap other UI elements.
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="600px" align="center" src="/_static/readme-ui.webm">
+<video autoplay muted loop playsinline width="600px" align="center" src="/_static/readme-ui.webm">
 </video>
 </figure>
 </div>

docs/guides/editor_features/overview.md

@@ -128,7 +128,7 @@ Get a link to share your notebook via our [online playground](../wasm.md):
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/share-wasm-link.webm">
+<video autoplay muted loop playsinline width="100%" height="100%" align="center" src="/_static/share-wasm-link.webm">
 </video>
 </figure>
 </div>

docs/guides/interactivity.md

@@ -7,7 +7,7 @@ global variable automatically runs all cells that reference it.**
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/readme-ui.webm">
+<video autoplay muted loop playsinline 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 muted loop width="100%" height="100%" align="center" src="/_static/readme-ui-form.webm">
+<video autoplay muted loop playsinline 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 muted loop width="100%" height="100%" align="center" src="/_static/outputs.webm">
+<video autoplay muted loop playsinline 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 muted loop width="100%" height="100%" align="center" src="/_static/docs-markdown-toggle.webm">
+<video autoplay muted loop playsinline 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/publishing/playground.md

@@ -123,7 +123,7 @@ link` to get a `marimo.app/...` URL representing your notebook:
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/share-wasm-link.webm">
+<video autoplay muted loop playsinline width="100%" height="100%" align="center" src="/_static/share-wasm-link.webm">
 </video>
 </figure>
 </div>

docs/guides/reactivity.md

@@ -67,7 +67,7 @@ eliminates a common cause of bugs in traditional notebooks like Jupyter.
 
 <!-- <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-delete-cell.webm">
+<video autoplay muted loop playsinline width="100%" height="100%" align="center" src="/_static/docs-delete-cell.webm">
 </video>
 <figcaption>No hidden state: deleting a cell deletes its variables.</figcaption>
 </figure>
@@ -196,7 +196,7 @@ disabled, it and its dependents are blocked from running.
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-disable-cell.webm">
+<video autoplay muted loop playsinline width="100%" height="100%" align="center" src="/_static/docs-disable-cell.webm">
 </video>
 <figcaption>Disabling a cell blocks it from running.</figcaption>
 </figure>
@@ -207,7 +207,7 @@ disabled, marimo will automatically run it.
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-enable-cell.webm">
+<video autoplay muted loop playsinline width="100%" height="100%" align="center" src="/_static/docs-enable-cell.webm">
 </video>
 <figcaption>Enable a cell through the context menu. Stale cells run
 automatically.</figcaption>

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 muted loop width="100%" height="100%" align="center" src="/_static/docs-state-task-list.webm">
+<video autoplay muted loop playsinline 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>
@@ -53,7 +53,7 @@ But sometimes, you might want interactions to mutate state:
 
 <div align="center" style="margin-top:2rem; margin-bottom:2rem">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-tied.webm">
+<video autoplay muted loop playsinline width="100%" height="100%" align="center" src="/_static/docs-state-tied.webm">
 </video>
 <figcaption>Use state to tie two elements together in a cycle.</figcaption>
 </figure>
@@ -155,7 +155,7 @@ implementation using state is simpler.
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-counter.webm">
+<video autoplay muted loop playsinline width="100%" height="100%" align="center" src="/_static/docs-state-counter.webm">
 </video>
 </figure>
 </div>
@@ -198,7 +198,7 @@ value depends on the other. This is impossible to do without `mo.state`.
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-tied.webm">
+<video autoplay muted loop playsinline width="100%" height="100%" align="center" src="/_static/docs-state-tied.webm">
 </video>
 </figure>
 </div>
@@ -253,7 +253,7 @@ The next few cells use state to create a todo list.
 
 <div align="center">
 <figure>
-<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-task-list.webm">
+<video autoplay muted loop playsinline 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 muted loop width="100%" height="100%" align="center" src="/_static/docs-df.webm">
+<video autoplay muted loop playsinline 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 muted loop width="100%" height="100%" align="center" src="/_static/docs-dataframe-transform.webm">
+<video autoplay muted loop playsinline 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 muted loop width="100%" height="100%" align="center" src="/_static/docs-dataframe-table.webm">
+<video autoplay muted loop playsinline 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 muted loop width="600px" align="center" src="/_static/docs-intro.webm">
+<video autoplay muted loop playsinline 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 muted loop width="700px" align="center" src="/_static/reactive.webm">
+<video autoplay muted loop playsinline 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 muted loop width="700px" align="center" src="/_static/readme-ui.webm">
+<video autoplay muted loop playsinline 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 muted loop width="100%" height="100%" align="center" src="/_static/docs-df.webm">
+<video autoplay muted loop playsinline 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 muted loop width="450px" align="center" src="/_static/docs-model-comparison.webm" style="border-radius: 8px">
+<video autoplay muted loop playsinline 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 muted loop width="700px" align="center" src="/_static/embedding.webm">
+<video autoplay muted loop playsinline width="700px" align="center" src="/_static/embedding.webm">
 </video>
 
 Check out our [guides](guides/index.md), our [example
@@ -206,25 +206,25 @@ GitHub to learn more.
   <tr>
     <td>
       <a target="_blank" href="getting_started/key_concepts">
-        <video autoplay muted loop style="max-height: 150px; width: auto; display: block" src="/_static/reactive.webm">
+        <video autoplay muted loop playsinline style="max-height: 150px; width: auto; display: block" src="/_static/reactive.webm">
         </video>
       </a>
     </td>
     <td>
       <a target="_blank" href="api/inputs/">
-        <video autoplay muted loop style="max-height: 150px; width: auto; display: block" src="/_static/readme-ui.webm">
+        <video autoplay muted loop playsinline style="max-height: 150px; width: auto; display: block" src="/_static/readme-ui.webm">
         </video>
       </a>
     </td>
     <td>
       <a target="_blank" href="guides/working_with_data/plotting">
-        <video autoplay muted loop style="max-height: 150px; width: auto; display: block" src="/_static/docs-intro.webm">
+        <video autoplay muted loop playsinline style="max-height: 150px; width: auto; display: block" src="/_static/docs-intro.webm">
         </video>
       </a>
     </td>
     <td>
       <a target="_blank" href="api/layouts/">
-        <video autoplay muted loop style="max-height: 150px; width: auto; display: block" src="/_static/outputs.webm">
+        <video autoplay muted loop playsinline style="max-height: 150px; width: auto; display: block" src="/_static/outputs.webm">
         </video>
       </a>
     </td>