From c93fdb2b2d9a73e16b83cd0508590a619f26ba4b Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Mon, 22 Jun 2026 10:53:37 +0800
Subject: [PATCH] feat: add iframe parser component and apply 16:9 sizing to
 youtube/codepen

Add a general iframe component (title/source props) rendered at 100%
container width with a 16:9 aspect ratio. Apply the same responsive
sizing to custom youtube and codepen components, overriding SeeMark's
fixed-dimension defaults.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../parser-components/codepen/codepen.js      | 23 +++++++++++++++++++
 .../parser-components/iframe/iframe.js        | 13 +++++++++++
 .../parser-components/youtube/youtube.js      | 22 ++++++++++++++++++
 src/pages/home/useSeeMarkParse.js             |  6 +++++
 4 files changed, 64 insertions(+)
 create mode 100644 src/components/parser-components/codepen/codepen.js
 create mode 100644 src/components/parser-components/iframe/iframe.js
 create mode 100644 src/components/parser-components/youtube/youtube.js

diff --git a/src/components/parser-components/codepen/codepen.js b/src/components/parser-components/codepen/codepen.js
new file mode 100644
index 0000000..0cd9dcb
--- /dev/null
+++ b/src/components/parser-components/codepen/codepen.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// adapted from CodePen official embed
+const CodePen = ({ title = '', source = '' }) => (
+  <iframe
+    src={source}
+    title={title}
+    scrolling="no"
+    frameBorder="no"
+    loading="lazy"
+    // eslint-disable-next-line react/no-unknown-property
+    allowTransparency="true"
+    className="block w-full aspect-video border-0"
+  />
+);
+
+CodePen.propTypes = {
+  title: PropTypes.string,
+  source: PropTypes.string,
+};
+
+export default CodePen;
diff --git a/src/components/parser-components/iframe/iframe.js b/src/components/parser-components/iframe/iframe.js
new file mode 100644
index 0000000..17a8077
--- /dev/null
+++ b/src/components/parser-components/iframe/iframe.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Iframe = ({ title = '', source = '' }) => (
+  <iframe title={title} src={source} className="block w-full aspect-video border-0" />
+);
+
+Iframe.propTypes = {
+  title: PropTypes.string,
+  source: PropTypes.string,
+};
+
+export default Iframe;
diff --git a/src/components/parser-components/youtube/youtube.js b/src/components/parser-components/youtube/youtube.js
new file mode 100644
index 0000000..e6a3db8
--- /dev/null
+++ b/src/components/parser-components/youtube/youtube.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// adapted from YouTube official embed
+const YouTube = ({ title = '', source = '' }) => (
+  <iframe
+    src={source}
+    title={title}
+    frameBorder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerPolicy="strict-origin-when-cross-origin"
+    allowFullScreen
+    className="block w-full aspect-video border-0"
+  />
+);
+
+YouTube.propTypes = {
+  title: PropTypes.string,
+  source: PropTypes.string,
+};
+
+export default YouTube;
diff --git a/src/pages/home/useSeeMarkParse.js b/src/pages/home/useSeeMarkParse.js
index 1779565..25472ab 100644
--- a/src/pages/home/useSeeMarkParse.js
+++ b/src/pages/home/useSeeMarkParse.js
@@ -14,6 +14,9 @@ import Image, {
   ImageLink,
 } from '@/components/parser-components/image/image';
 import InternalLink from '@/components/parser-components/internal-link/internal-link';
+import Iframe from '@/components/parser-components/iframe/iframe';
+import YouTube from '@/components/parser-components/youtube/youtube';
+import CodePen from '@/components/parser-components/codepen/codepen';
 
 const useSeeMarkParse = ({ latexDelimiter, documentFormat, imageFiles }) => {
   const seeMarkReactParse = useCallback(
@@ -35,6 +38,9 @@ const useSeeMarkParse = ({ latexDelimiter, documentFormat, imageFiles }) => {
           imageLink: ImageLink,
           imageDisplay: ImageDisplay,
           imageDisplayLink: ImageDisplayLink,
+          iframe: Iframe,
+          youtube: YouTube,
+          codepen: CodePen,
         },
       })(markdown);
     },