diff --git a/apps/website/src/pages/playground.md b/apps/website/src/pages/playground.md
index 3fee89a..4d71864 100644
--- a/apps/website/src/pages/playground.md
+++ b/apps/website/src/pages/playground.md
@@ -36,9 +36,9 @@ development!
 ffmpeg.wasm fundamentals.
 
 Demo Video:
-<iframe style={{"aspect-ratio": "16 / 9", width: "100%"}} src="https://youtube.com/embed/F01B0fV20QA" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
-
-[YouTube Video Link](https://www.youtube.com/watch?v=F01B0fV20QA)
+<video width="100%" controls>
+  <source src="/video/playground-how-to.mp4" type="video/mp4" />
+</video>
 
 A typical flow to use ffmpeg.wasm is:
 
diff --git a/apps/website/static/video/playground-how-to.mp4 b/apps/website/static/video/playground-how-to.mp4
new file mode 100644
index 0000000..6b77d4c
Binary files /dev/null and b/apps/website/static/video/playground-how-to.mp4 differ