diff --git a/packages/documentation/src/components/Markdown/renderers.tsx b/packages/documentation/src/components/Markdown/renderers.tsx
index 46ef7600de..5f11f8129e 100644
--- a/packages/documentation/src/components/Markdown/renderers.tsx
+++ b/packages/documentation/src/components/Markdown/renderers.tsx
@@ -1,6 +1,7 @@
 import {
   DEFAULT_MARKDOWN_RENDERERS,
   getTokensText,
+  ImageRenderer,
   MarkdownRenderers,
   useSluggedId,
 } from "react-marked-renderer";
@@ -117,6 +118,24 @@ export const renderers: MarkdownRenderers = {
     );
   },
 
+  img: function Img({ href, ...props }) {
+    return (
+      <Link
+        href={href}
+        className="rmd-media-container rmd-media-container--auto"
+      >
+        {href.endsWith(".mp4") ? (
+          <video autoPlay loop muted controls>
+            <source src={href} type="video/mp4" />
+            {props.text || props.title}
+          </video>
+        ) : (
+          <ImageRenderer href={href} {...props} />
+        )}
+      </Link>
+    );
+  },
+
   table: function TableRenderer({ children }) {
     return (
       <TableContainer>