diff --git a/components/resource/content/Content.tsx b/components/resource/content/Content.tsx
index 4ad9f202..8040c866 100644
--- a/components/resource/content/Content.tsx
+++ b/components/resource/content/Content.tsx
@@ -14,6 +14,7 @@ import { Image } from "./components/image/Image";
import { Pre } from "./components/pre/Pre";
import { Quote } from "./components/quote/Quote";
import { Sandbox } from "./components/sandbox/Sandbox";
+import { Video } from "./components/video/Video";
interface ContentProps {
readonly content: MDXRemoteSerializeResult;
@@ -32,6 +33,7 @@ const customMdxComponents = {
Image,
Link,
Quote,
+ Video,
Highlight,
Sandbox: ({ id }: { id: string }) => ,
pre: Pre,
diff --git a/components/resource/content/components/video/Video.tsx b/components/resource/content/components/video/Video.tsx
new file mode 100644
index 00000000..6368ef13
--- /dev/null
+++ b/components/resource/content/components/video/Video.tsx
@@ -0,0 +1,57 @@
+import clsx from "clsx";
+import { memo, useRef, useState } from "react";
+
+import PauseIcon from "public/svg/pause.svg";
+import PlayIcon from "public/svg/play.svg";
+
+import styles from "./video.module.scss";
+
+type VideoProps = { readonly alt?: string } & JSX.IntrinsicElements["video"];
+
+export const Video = memo(({ alt, ...props }: VideoProps) => {
+ const [paused, setPaused] = useState(!props.autoPlay);
+ const [controlsVisible, setControlsVisible] = useState(false);
+ const ref = useRef(null);
+
+ const togglePlay = () => {
+ if (ref.current) {
+ if (ref.current.paused) {
+ setControlsVisible(false);
+ setPaused(false);
+ void ref.current.play();
+ } else {
+ setControlsVisible(true);
+ setPaused(true);
+ ref.current.pause();
+ }
+ }
+ };
+
+ return (
+
+
+