diff --git a/docs/overlays/getting-started.md b/docs/overlays/getting-started.md
index e968c92..add8c38 100644
--- a/docs/overlays/getting-started.md
+++ b/docs/overlays/getting-started.md
@@ -61,7 +61,9 @@ To enable custom code for AlertBox:
 2. Go to the "Followers" tab.
 3. Toggle the "Enable custom CSS" option for the alert type you want to use.
 
-![Alert box CSS editor](img/alert-box-css-editor.gif)
+<video controls width="100%">
+  <source src="/video/alertbox-css-editor.mp4" />
+</video>
 
 ## Custom Widget
 
diff --git a/docs/overlays/img/alert-box-css-editor.gif b/docs/overlays/img/alert-box-css-editor.gif
deleted file mode 100644
index df16dcb..0000000
Binary files a/docs/overlays/img/alert-box-css-editor.gif and /dev/null differ
diff --git a/static/video/alertbox-css-editor.mp4 b/static/video/alertbox-css-editor.mp4
new file mode 100644
index 0000000..7fc1ae4
Binary files /dev/null and b/static/video/alertbox-css-editor.mp4 differ