fix: add support for mp4 videos

Author: Ahtesham Quraish

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx

@@ -5,6 +5,7 @@ import { FullWidth, WideWidth, DefaultWidth } from "./Icons"
 import { RiCloseLargeLine } from "@remixicon/react"
 import { ActionButton } from "@mitodl/smoot-design"
 import { EditableCaption } from "../shared/EditableCaption"
+import { isVideoUrl } from "./lib"
 
 const StyledNodeViewWrapper = styled(NodeViewWrapper, {
   shouldForwardProp: (prop) =>
@@ -123,7 +124,16 @@ const MediaContainer = styled.div(({ theme }) => ({
     display: "block",
   },
 
-  ".layout-full & iframe": {
+  video: {
+    width: "100%",
+    height: "100%",
+    borderRadius: "6px",
+    display: "block",
+    objectFit: "contain",
+    backgroundColor: "#000",
+  },
+
+  ".layout-full & iframe, .layout-full & video": {
     borderRadius: 0,
   },
   ".ProseMirror-selectednode .layout-wide &": {
@@ -216,13 +226,14 @@ export const MediaEmbedNodeView = ({
       )}
 
       <MediaContainer>
-        <iframe
-          src={src}
-          frameBorder="0"
-          allowFullScreen
-          title={caption}
-          inert={editable}
-        />
+        {isVideoUrl(src) ? (
+          <video src={src} controls title={caption}>
+            <track kind="captions" />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+        )}
       </MediaContainer>
 
       <EditableCaption

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import styled from "@emotion/styled"
 import { EditableCaption } from "../shared/EditableCaption"
+import { isVideoUrl } from "./lib"
 
 const StyledWrapper = styled.div({
   position: "relative",
@@ -35,6 +36,15 @@ const MediaContainer = styled.div({
     borderRadius: "6px",
     display: "block",
   },
+
+  video: {
+    width: "100%",
+    height: "100%",
+    borderRadius: "6px",
+    display: "block",
+    objectFit: "contain",
+    backgroundColor: "#000",
+  },
 })
 
 interface MediaEmbedNode {
@@ -53,7 +63,14 @@ export const MediaEmbedViewer = ({ node }: { node?: MediaEmbedNode }) => {
   return (
     <StyledWrapper className={`layout-${layout}`}>
       <MediaContainer>
-        <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+        {isVideoUrl(src) ? (
+          <video src={src} controls title={caption}>
+            <track kind="captions" />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+        )}
       </MediaContainer>
 
       <EditableCaption

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts

@@ -1,3 +1,12 @@
+export function isVideoUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url)
+    return parsed.pathname.toLowerCase().endsWith(".mp4")
+  } catch {
+    return false
+  }
+}
+
 export function convertToEmbedUrl(url: string): string | null {
   let parsed: URL
 
@@ -9,6 +18,14 @@ export function convertToEmbedUrl(url: string): string | null {
 
   const hostname = parsed.hostname.replace("www.", "")
 
+  // --- MIT LEARN MP4 VIDEOS ---
+  if (
+    hostname === "learn.mit.edu" &&
+    parsed.pathname.toLowerCase().endsWith(".mp4")
+  ) {
+    return url // Return the URL as-is for video element
+  }
+
   // --- YOUTUBE WATCH ---
   if (hostname === "youtube.com" && parsed.pathname === "/watch") {
     const videoId = parsed.searchParams.get("v")