reduce videos

docs/docs/cloud/how-tos/invoke_studio.md

@@ -8,6 +8,8 @@ The LangGraph Studio lets you test different configurations and inputs to your g
     1. Select `Submit` to invoke the selected assistant.
 1. View output of the invocation in the right-hand pane.
 
-The following GIF shows these exact steps being carried out:
+The following video shows these exact steps being carried out:
 
-![Using LangGraph Studio](./img/studio_input.gif)
+<video controls allowfullscreen="true" poster="../img/studio_input_poster.png">
+    <source src="../img/studio_input.mp4" type="video/mp4">
+</video>

docs/docs/cloud/how-tos/test_deployment.md

@@ -9,6 +9,8 @@ Starting from the <a href="https://smith.langchain.com/" target="_blank">LangSmi
 1. In the top-right corner, select `Open LangGraph Studio`.
 1. [Invoke an assistant](./invoke_studio.md) or [view an existing thread](./threads_studio.md).
 
-The following GIF shows these exact steps being carried out:
+The following video shows these exact steps being carried out:
 
-![Using LangGraph Studio](./img/studio_usage.gif)
+<video controls allowfullscreen="true" poster="../img/studio_usage_poster.png">
+    <source src="../img/studio_usage.mp4" type="video/mp4">
+</video>

docs/docs/cloud/how-tos/threads_studio.md

@@ -6,14 +6,18 @@
 1. View the state of the thread (i.e. the output) in the right-hand pane.
 1. To create a new thread, select `+ New Thread`.
 
-The following GIF shows these exact steps being carried out:
+The following video shows these exact steps being carried out:
 
-![Using LangGraph Studio](./img/studio_threads.gif)
+<video controls="true" allowfullscreen="true" poster="../img/studio_threads_poster.png">
+    <source src="../img/studio_threads.mp4" type="video/mp4">
+</video>
 
 ## Edit Thread State
 
 The LangGraph Studio UI contains features for editing thread state. Explore these features in the right-hand pane. Select the `Edit` icon, modify the desired state, and then select `Fork` to invoke the assistant with the updated state.
 
-The following GIF shows how to edit a thread in the studio:
+The following video shows how to edit a thread in the studio:
 
-![Using LangGraph Studio](./img/studio_forks.gif)
+<video controls allowfullscreen="true" poster="../img/studio_forks_poster.png">
+    <source src="../img/studio_forks.mp4" type="video/mp4">
+</video>

docs/docs/cloud/index.md

@@ -12,7 +12,11 @@
 !!! warning "Under Construction"
     LangGraph Cloud documentation is under construction. Contents may change until general availability.
 
-![GIF](./how-tos/img/studio_input.gif)
+
+<video controls preload="auto" allowfullscreen="true" poster="how-tos/img/studio_forks_poster.png">
+    <source src="how-tos/img/studio_forks.mp4" type="video/mp4">
+</video>
+
 
 ## Overview