diff --git a/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
index 088f408551..9d8ecc7801 100644
--- a/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
@@ -27,6 +27,7 @@ import TiptapEditor, { MainToolbarContent } from "./TiptapEditor"
 
 // --- Tiptap Node ---
 import { ImageUploadNode } from "./components/tiptap-node/image-upload-node/image-upload-node-extension"
+import { MediaEmbed } from "./components/tiptap-node/media-embed/media-embed-extension"
 import { HorizontalRule } from "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
 
 import "./components/tiptap-node/blockquote-node/blockquote-node.scss"
@@ -60,6 +61,7 @@ const ViewContainer = styled.div({
 
 const Title = styled(Typography)<TypographyProps>({
   margin: "60px auto",
+  maxWidth: "1000px",
 })
 
 const TitleInput = styled(Input)({
@@ -152,6 +154,11 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
       setTouched(true)
       setContent(json)
     },
+    onCreate: ({ editor }) => {
+      editor.commands.updateAttributes("mediaEmbed", {
+        editable: !readOnly,
+      })
+    },
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -179,6 +186,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
       Subscript,
       Selection,
       Image,
+      MediaEmbed,
       ImageUploadNode.configure({
         accept: "image/*",
         maxSize: MAX_FILE_SIZE,
@@ -189,6 +197,25 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
     ],
   })
 
+  React.useEffect(() => {
+    if (!editor) return
+
+    editor
+      .chain()
+      .command(({ tr, state }) => {
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === "mediaEmbed") {
+            tr.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
+              editable: !readOnly,
+            })
+          }
+        })
+        return true
+      })
+      .run()
+  }, [editor, readOnly])
+
   if (!editor) return null
 
   const isPending = isCreating || isUpdating
@@ -212,7 +239,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
             </StyledToolbar>
           ) : (
             <StyledToolbar>
-              <MainToolbarContent />
+              <MainToolbarContent editor={editor} />
               <Button
                 variant="primary"
                 disabled={isPending || !title.trim() || !touched}
diff --git a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
index e1451bdc60..e3c7f00981 100644
--- a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
@@ -7,6 +7,7 @@ import styled from "@emotion/styled"
 import { EditorContent } from "@tiptap/react"
 import type { Editor } from "@tiptap/core"
 import { ImageUploadButton } from "./components/tiptap-ui/image-upload-button"
+import { MediaEmbedButton } from "./components/tiptap-ui/media-embed/media-embed-button"
 
 // --- UI Primitives ---
 import { Spacer } from "./components/tiptap-ui-primitive/spacer"
@@ -47,9 +48,12 @@ const StyledEditorContent = styled(EditorContent)<{ readOnly: boolean }>(
     backgroundColor: theme.custom.colors.white,
     borderRadius: "10px",
     margin: "20px auto",
+    ".tiptap.ProseMirror.simple-editor": {
+      padding: "3rem 3rem 5vh",
+    },
     ...(readOnly
       ? {
-          maxWidth: "100%",
+          maxWidth: "1000px",
           backgroundColor: "transparent",
           ".tiptap.ProseMirror.simple-editor": {
             padding: "0",
@@ -59,7 +63,10 @@ const StyledEditorContent = styled(EditorContent)<{ readOnly: boolean }>(
   }),
 )
 
-export const MainToolbarContent = () => {
+interface TiptapEditorToolbarProps {
+  editor: Editor
+}
+export const MainToolbarContent = ({ editor }: TiptapEditorToolbarProps) => {
   return (
     <>
       <Spacer />
@@ -109,6 +116,9 @@ export const MainToolbarContent = () => {
       <ToolbarGroup>
         <ImageUploadButton text="Add" />
       </ToolbarGroup>
+      <ToolbarGroup>
+        <MediaEmbedButton editor={editor} text="Embed" />
+      </ToolbarGroup>
       <Spacer />
     </>
   )
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/Icons.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/Icons.tsx
new file mode 100644
index 0000000000..a0a4d44e89
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/Icons.tsx
@@ -0,0 +1,33 @@
+import React from "react"
+export const FullWidth = () => (
+  <span className="svg-icon">
+    <svg width="25" height="25">
+      <path
+        d="M4.027 17.24V5.492c0-.117.046-.216.14-.3a.453.453 0 01.313-.123h17.007c.117 0 .22.04.313.12.093.08.14.18.14.3v11.74c0 .11-.046.21-.14.3a.469.469 0 01-.313.12H4.48a.432.432 0 01-.314-.13.41.41 0 01-.14-.3zm2.943 3.407v-.833a.45.45 0 01.122-.322.387.387 0 01.276-.132H18.61a.35.35 0 01.27.132.472.472 0 01.116.322v.833c0 .117-.04.216-.116.3a.361.361 0 01-.27.123H7.368a.374.374 0 01-.276-.124.405.405 0 01-.122-.3z"
+        fillRule="evenodd"
+      ></path>
+    </svg>
+  </span>
+)
+
+export const WideWidth = () => (
+  <span className="svg-icon">
+    <svg width="25" height="25">
+      <path
+        d="M3 17.004V9.01a.4.4 0 01.145-.31.476.476 0 01.328-.13h17.74c.12 0 .23.043.327.13a.4.4 0 01.145.31v7.994a.404.404 0 01-.145.313.48.48 0 01-.328.13H3.472a.483.483 0 01-.327-.13.402.402 0 01-.145-.313zm2.212 3.554v-.87c0-.13.05-.243.145-.334a.472.472 0 01.328-.137H19c.124 0 .23.045.322.137a.457.457 0 01.138.335v.86c0 .12-.046.22-.138.31a.478.478 0 01-.32.13H5.684a.514.514 0 01-.328-.13.415.415 0 01-.145-.32zm0-14.246v-.84c0-.132.05-.243.145-.334A.477.477 0 015.685 5H19a.44.44 0 01.322.138.455.455 0 01.138.335v.84a.451.451 0 01-.138.334.446.446 0 01-.32.138H5.684a.466.466 0 01-.328-.138.447.447 0 01-.145-.335z"
+        fill-rule="evenodd"
+      ></path>
+    </svg>
+  </span>
+)
+
+export const DefaultWidth = () => (
+  <span className="svg-icon">
+    <svg width="25" height="25">
+      <path
+        d="M5 20.558v-.9c0-.122.04-.226.122-.312a.404.404 0 01.305-.13h13.347a.45.45 0 01.32.13c.092.086.138.19.138.312v.9a.412.412 0 01-.138.313.435.435 0 01-.32.13H5.427a.39.39 0 01-.305-.13.432.432 0 01-.122-.31zm0-3.554V9.01c0-.12.04-.225.122-.31a.4.4 0 01.305-.13h13.347c.122 0 .23.043.32.13.092.085.138.19.138.31v7.994a.462.462 0 01-.138.328.424.424 0 01-.32.145H5.427a.382.382 0 01-.305-.145.501.501 0 01-.122-.328zM5 6.342v-.87c0-.12.04-.23.122-.327A.382.382 0 015.427 5h13.347c.122 0 .23.048.32.145a.462.462 0 01.138.328v.87c0 .12-.046.225-.138.31a.447.447 0 01-.32.13H5.427a.4.4 0 01-.305-.13.44.44 0 01-.122-.31z"
+        fill-rule="evenodd"
+      ></path>
+    </svg>
+  </span>
+)
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
new file mode 100644
index 0000000000..89053fa34a
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
@@ -0,0 +1,109 @@
+import React, { useRef, useState, useEffect } from "react"
+import { NodeViewWrapper } from "@tiptap/react"
+import { FullWidth, WideWidth, DefaultWidth } from "./Icons"
+
+import "./style.scss"
+
+interface MediaEmbedNodeProps {
+  node: any
+  updateAttributes: (attrs: Record<string, any>) => void
+}
+
+export const MediaEmbedNodeView = ({
+  node,
+  updateAttributes,
+}: MediaEmbedNodeProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [hover, setHover] = useState(false)
+
+  const isEditable = node.attrs.editable
+
+  const checkHover = (e: React.MouseEvent) => {
+    if (isEditable === false) return
+    if (!containerRef.current) return
+
+    const rect = containerRef.current.getBoundingClientRect()
+
+    const inside =
+      e.clientX >= rect.left &&
+      e.clientX <= rect.right &&
+      e.clientY >= rect.top &&
+      e.clientY <= rect.bottom
+
+    setHover(inside)
+  }
+  return (
+    <NodeViewWrapper
+      className={`media-embed ${node.attrs.layout}`}
+      style={{
+        float: node.attrs.float || "none",
+      }}
+    >
+      <div
+        ref={containerRef}
+        onMouseMove={checkHover}
+        onMouseLeave={() => {
+          if (!hover) return
+          setHover(false)
+        }}
+        className="media-container"
+      >
+        <div
+          className="iframe-shield"
+          style={{ pointerEvents: hover ? "auto" : "none" }}
+        />
+        {isEditable && hover && (
+          <>
+            <div className="media-layout-toolbar">
+              <button
+                className={node.attrs.layout === "default" ? "active" : ""}
+                onClick={() => updateAttributes({ layout: "default" })}
+                title="Default width"
+              >
+                <DefaultWidth />
+              </button>
+
+              <button
+                className={node.attrs.layout === "wide" ? "active" : ""}
+                onClick={() => updateAttributes({ layout: "wide" })}
+                title="Wide"
+              >
+                <WideWidth />
+              </button>
+
+              <button
+                className={node.attrs.layout === "full" ? "active" : ""}
+                onClick={() => updateAttributes({ layout: "full" })}
+                title="Full width"
+              >
+                <FullWidth />
+              </button>
+            </div>
+          </>
+        )}
+
+        {/* Iframe */}
+        <iframe
+          src={node.attrs.src}
+          width={"100%"}
+          height={"100%"}
+          style={{ display: "block", borderRadius: "6px" }}
+          frameBorder={node.attrs.frameborder}
+          allowFullScreen={node.attrs.allowfullscreen === "true"}
+        />
+      </div>
+      <div className="media-caption">
+        {isEditable ? (
+          <input
+            type="text"
+            placeholder="Add caption…"
+            value={node.attrs.caption || ""}
+            onChange={(e) => updateAttributes({ caption: e.target.value })}
+          />
+        ) : (
+          node.attrs.caption && <p>{node.attrs.caption}</p>
+        )}
+      </div>
+    </NodeViewWrapper>
+  )
+}
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
new file mode 100644
index 0000000000..58bdc63578
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
@@ -0,0 +1,64 @@
+import { Node, mergeAttributes, type CommandProps } from "@tiptap/core"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+import { MediaEmbedNodeView } from "./MediaEmbedNodeView"
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    mediaEmbed: {
+      insertMedia: (src: string) => ReturnType
+    }
+  }
+}
+
+export const MediaEmbed = Node.create({
+  name: "mediaEmbed",
+
+  group: "block",
+  atom: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      width: { default: "100%" },
+      height: { default: "100%" },
+      frameborder: { default: 0 },
+      allowfullscreen: { default: "true" },
+      float: { default: null }, // ← NEW ("left" | "right" | null)
+      editable: { default: true },
+      layout: {
+        default: "default", // 👈 NEW!
+      },
+      caption: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-caption") || "",
+        renderHTML: (attrs) => ({
+          "data-caption": attrs.caption,
+        }),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: "iframe[src]" }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["iframe", mergeAttributes(HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      insertMedia:
+        (src: string) =>
+        ({ commands }: CommandProps) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: { src },
+          })
+        },
+    }
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(MediaEmbedNodeView)
+  },
+})
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
new file mode 100644
index 0000000000..9096d7dbbe
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
@@ -0,0 +1,137 @@
+.media-embed {
+  width: 100%;
+  margin: 24px 0;
+  position: relative;
+
+  .media-caption {
+    max-width: 1000px;
+    margin: auto;
+    margin-top: 8px;
+
+    input {
+      width: 100%;
+      border: none;
+      padding: 4px 2px;
+      text-align: center;
+      font-size: 14px;
+      outline: none;
+
+      &:focus {
+        border-bottom-color: #000;
+      }
+    }
+
+    p {
+      font-size: 14px;
+      color: #555;
+      margin: 4px 0;
+      text-align: center;
+      font-style: italic;
+    }
+  }
+
+  &.default {
+    width: 100%;
+  }
+
+  &.wide {
+    width: 90vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: calc(-45vw);
+    margin-right: calc(-45vw);
+  }
+
+  &.full {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+  }
+}
+
+/* Toolbar styling (optional) */
+.media-layout-toolbar {
+  display: flex;
+  background: rgba(0, 0, 0, 0.85);
+  padding: 6px 10px;
+  border-radius: 8px;
+  gap: 8px;
+  width: 150px;
+  margin-bottom: 10px;
+  margin: 0px auto;
+  margin-bottom: 10px;
+}
+
+.media-layout-toolbar button {
+  width: 40px;
+  height: 28px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  filter: brightness(0.9);
+  color: white;
+  cursor: pointer;
+}
+
+.media-layout-toolbar button.active {
+  background: #9be19b;
+  color: black;
+}
+
+.svg-icon {
+  fill: white;
+}
+
+.media-container {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+}
+
+.media-container iframe {
+  width: 100%;
+  height: 100%; // now fills the container
+  display: block;
+  border-radius: 6px;
+  position: relative;
+}
+.iframe-shield {
+  position: absolute;
+  inset: 0;
+  z-index: 5; // Above iframe, below toolbar
+  background: transparent;
+  pointer-events: auto;
+}
+
+.media-layout-toolbar {
+  position: sticky;
+  top: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2000; /* make it VERY high */
+}
+
+.media-layout-toolbar::after {
+  content: "";
+  position: absolute;
+  top: 100%; /* position just below toolbar */
+  left: 50%;
+  transform: translateX(-50%);
+
+  /* ↓ Triangle arrow */
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid rgba(0, 0, 0, 0.85); /* same color as toolbar */
+}
+
+.iframe-shield {
+  position: absolute;
+  z-index: 1000; /* lower than toolbar */
+}
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/Icon.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/Icon.tsx
new file mode 100644
index 0000000000..873d0bded5
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/Icon.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+export const Icon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="tiptap-button-icon"
+  >
+    <rect x="2" y="3" width="20" height="18" rx="2" />
+    <polygon points="10 9 15 12 10 15 10 9" />
+  </svg>
+)
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/MediaUrlInputDialog.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/MediaUrlInputDialog.tsx
new file mode 100644
index 0000000000..33e97e47ed
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/MediaUrlInputDialog.tsx
@@ -0,0 +1,56 @@
+import React, { useState, useCallback } from "react"
+import NiceModal, { muiDialogV5 } from "@ebay/nice-modal-react"
+import { TextField, Alert } from "@mitodl/smoot-design"
+import { FormDialog } from "ol-components"
+
+const MediaUrlInputDialog = NiceModal.create(() => {
+  const modal = NiceModal.useModal()
+  const [url, setUrl] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = (e?: any) => {
+    e?.preventDefault()
+
+    if (!url.trim()) {
+      setError("URL is required")
+      return
+    }
+    modal.resolve(url)
+    modal.hide()
+  }
+
+  const handleReset = useCallback(() => {
+    setUrl("")
+    setError(null)
+  }, [setUrl, setError])
+
+  return (
+    <FormDialog
+      {...muiDialogV5(modal)}
+      title="Embed Media"
+      confirmText="Insert"
+      onSubmit={handleSubmit}
+      onReset={handleReset}
+      noValidate
+      fullWidth
+    >
+      <TextField
+        name="mediaUrl"
+        label="Media URL"
+        placeholder="https://youtube.com/..."
+        value={url}
+        error={!!error}
+        errorText={error ?? ""}
+        onChange={(e: any) => {
+          setError(null)
+          setUrl(e.target.value)
+        }}
+        fullWidth
+      />
+
+      {error && <Alert severity="error">{error}</Alert>}
+    </FormDialog>
+  )
+})
+
+export default MediaUrlInputDialog
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
new file mode 100644
index 0000000000..d60f4bc8d8
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
@@ -0,0 +1,48 @@
+export function convertToEmbedUrl(url: string): string {
+  let parsed: URL
+
+  try {
+    parsed = new URL(url)
+  } catch {
+    return url // not a valid URL
+  }
+
+  const hostname = parsed.hostname.replace("www.", "")
+
+  // --- YOUTUBE WATCH ---
+  if (hostname === "youtube.com" && parsed.pathname === "/watch") {
+    const videoId = parsed.searchParams.get("v")
+    return videoId ? `https://www.youtube.com/embed/${videoId}` : url
+  }
+
+  // --- YOUTUBE SHORTS ---
+  if (hostname === "youtube.com" && parsed.pathname.startsWith("/shorts/")) {
+    const id = parsed.pathname.split("/shorts/")[1]
+    return id ? `https://www.youtube.com/embed/${id}` : url
+  }
+
+  // --- YOUTUBE SHORT youtu.be/shorts/??? (rare but possible) ---
+  if (hostname === "youtu.be" && parsed.pathname.startsWith("/shorts/")) {
+    const id = parsed.pathname.split("/shorts/")[1]
+    return id ? `https://www.youtube.com/embed/${id}` : url
+  }
+
+  // --- YOUTUBE SHORT youtu.be/VIDEO_ID ---
+  if (hostname === "youtu.be") {
+    const id = parsed.pathname.slice(1)
+    return id ? `https://www.youtube.com/embed/${id}` : url
+  }
+
+  // --- YOUTUBE EMBED (leave as-is) ---
+  if (hostname === "youtube.com" && parsed.pathname.startsWith("/embed/")) {
+    return url
+  }
+
+  // --- VIMEO ---
+  if (hostname === "vimeo.com") {
+    const id = parsed.pathname.slice(1)
+    return id ? `https://player.vimeo.com/video/${id}` : url
+  }
+
+  return url // fallback
+}
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx
new file mode 100644
index 0000000000..9b17fbb020
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx
@@ -0,0 +1,70 @@
+import React, { forwardRef, useCallback } from "react"
+import { Button } from "../../tiptap-ui-primitive/button"
+import { useMediaEmbed } from "./useMediaEmbed"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+export interface MediaEmbedButtonProps {
+  editor?: any
+  text?: string
+  showShortcut?: boolean
+  icon?: React.FC<React.SVGProps<SVGSVGElement>>
+  onClick?: (e: React.MouseEvent) => void
+}
+
+export const MediaEmbedButton = forwardRef<
+  HTMLButtonElement,
+  MediaEmbedButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      showShortcut,
+      icon: CustomIcon,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+
+    const {
+      isVisible,
+      canInsert,
+      label,
+      Icon: DefaultIcon,
+      handleEmbed,
+    } = useMediaEmbed(editor)
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleEmbed()
+      },
+      [handleEmbed, onClick],
+    )
+
+    if (!isVisible) return null
+
+    const RenderIcon = CustomIcon ?? DefaultIcon
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        disabled={!canInsert}
+        aria-label={label}
+        tooltip={label}
+        onClick={handleClick}
+        ref={ref}
+        {...props}
+      >
+        <RenderIcon />
+        {text && <span className="tiptap-button-text">{text}</span>}
+      </Button>
+    )
+  },
+)
+
+MediaEmbedButton.displayName = "MediaEmbedButton"
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
new file mode 100644
index 0000000000..11897ba5d5
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
@@ -0,0 +1,38 @@
+import { useCallback, useMemo } from "react"
+import type { Editor } from "@tiptap/react"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import { convertToEmbedUrl } from "./lib"
+import NiceModal from "@ebay/nice-modal-react"
+import MediaUrlInputDialog from "./MediaUrlInputDialog"
+import { Icon } from "./Icon"
+
+export function useMediaEmbed(editor?: Editor | null) {
+  const resolved = useTiptapEditor(editor).editor
+
+  const isVisible = !!resolved
+  const canInsert = resolved?.isEditable ?? false
+
+  const label = "Embed Media"
+
+  const handleEmbed = useCallback(async () => {
+    try {
+      const url: string = await NiceModal.show(MediaUrlInputDialog)
+      console.log("URL received from modal:", url)
+      if (!url) return
+
+      resolved?.commands.insertMedia(convertToEmbedUrl(url))
+    } catch {
+      // modal was closed / cancelled
+    }
+  }, [resolved])
+
+  return {
+    editor: resolved,
+    isVisible,
+    canInsert,
+    label,
+    Icon,
+    isActive: false,
+    handleEmbed,
+  }
+}