From cfc834c600568e99047ce9b7ec78b0447b9bafae Mon Sep 17 00:00:00 2001
From: arpandhakal <arpandhakal20@gmail.com>
Date: Fri, 5 Dec 2025 11:11:05 +0545
Subject: [PATCH] fix(OUT-2711): cannot change the size, cannot go fulscreen
 mode on video embeds.

- used allowFullScreen attributes on the iframe embed.
- used link-to-iframe package to convert urls to support embedding.
---
 package.json                                    | 1 +
 src/components/tiptap/iframe/EmbedComponent.tsx | 7 ++++++-
 yarn.lock                                       | 5 +++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c374d11..79c1206 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "copilot-node-sdk": "^3.12.1",
     "handlebars": "^4.7.8",
     "http-status": "^1.7.4",
+    "link-to-iframe": "^1.0.8",
     "next": "latest",
     "p-retry": "^6.2.1",
     "prisma": "^5.6.0",
diff --git a/src/components/tiptap/iframe/EmbedComponent.tsx b/src/components/tiptap/iframe/EmbedComponent.tsx
index b2af5c1..2ca10f5 100644
--- a/src/components/tiptap/iframe/EmbedComponent.tsx
+++ b/src/components/tiptap/iframe/EmbedComponent.tsx
@@ -4,6 +4,7 @@ import { Resize } from '../image/resizeIcon'
 import { useAppState } from '@/hooks/useAppState'
 import { usePathname } from 'next/navigation'
 import { debounce } from '@mui/material'
+import { IframeAttributes, linkToIframe } from 'link-to-iframe'
 
 export const EmbedComponent = (props: any) => {
   const [isResizing, setIsResizing] = useState(false)
@@ -52,6 +53,9 @@ export const EmbedComponent = (props: any) => {
 
   const appState = useAppState()
   const pathname = usePathname()
+  const video = linkToIframe(extractIframeSrc(props.node.attrs.src), {
+    returnObject: true,
+  }) as IframeAttributes //safe to do. returnObject: true always returns an IframeAttributes object.
 
   return (
     <NodeViewWrapper className='embed relative'>
@@ -63,13 +67,14 @@ export const EmbedComponent = (props: any) => {
         }}
       >
         <iframe
-          src={extractIframeSrc(props.node.attrs.src)}
+          src={video?.src}
           width='100%'
           height='100%'
           onError={(e) => {
             e.stopPropagation()
             console.info('[iframe error]:', e)
           }}
+          allowFullScreen
         />
       </div>
       {!pathname.includes('client-preview') && !appState?.appState.readOnly && (
diff --git a/yarn.lock b/yarn.lock
index c7dca53..332b94c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5762,6 +5762,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+link-to-iframe@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/link-to-iframe/-/link-to-iframe-1.0.8.tgz#dab3e714477174364071bb74d5fd44460941b3e7"
+  integrity sha512-CxVz2rd7k8vudDe4q+LCbSBuReKEozH+7KXqYWgGuTV/bor9gNUilPMnXkRvtn1b087fSOicLRIBHe6AUvGLXA==
+
 linkify-it@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"