iFrame 与嵌入
在文档中嵌入 Vimeo、CodePen、Figma 和 Loom 等外部内容，自动应用样式并响应式调整尺寸。
文档中的每个 <iframe> 都会自动获得圆角、带框边框以及与页面其余部分一致的间距。你无需使用包裹用的 div 或工具类。
自动样式
Jamdesk 在渲染时为每个 iframe 应用以下边框样式：
| 属性 | 值 | 说明 |
|---|---|---|
| 圆角半径 | 0.5rem | 内容区域的圆角 |
| 边框宽度 | 8px | 内容周围的视觉内边距 |
| 边框 | 1px | 使用主题颜色的细边框 |
| 间距 | 1rem + 9px | 上下外边距 |
边框颜色取自 --color-bg-secondary，边框线使用 --color-border。这些 CSS 自定义属性会跟随你的主题变化，包括深色模式。
嵌入外部内容
基础嵌入使用标准的 HTML iframe 标签：
<iframe
src="https://example.com/embed"
width="100%"
height="400"
title="Description of embedded content"
/>务必添加 title 属性。屏幕阅读器会朗读该属性。它也能让查看页面源代码的人了解嵌入内容是什么。
响应式尺寸
大多数嵌入服务提供的内容采用固定宽高比。Tailwind 的 aspect-video 工具类可让 iframe 保持 16:9，无论视口宽度如何。w-full 会将其拉伸以填满父容器：
<iframe
className="w-full aspect-video"
src="https://example.com/embed"
title="16:9 responsive embed"
/>w-full 通过 Tailwind 设置 width: 100%。如果不设置，iframe 会使用浏览器默认宽度（通常为 300px），在宽屏上看起来会很奇怪。
对于非 16:9 的内容，例如 Figma 原型或仪表板，可以使用 Tailwind 的任意宽高比语法：
<iframe
className="w-full aspect-[4/3]"
src="https://example.com/embed"
title="4:3 responsive embed"
/>将 4/3 替换为适合内容的比例。正方形嵌入使用 aspect-[1/1]，超宽屏使用 aspect-[21/9]，依此类推。
Vimeo
使用指向播放器 URL 的标准 iframe 嵌入 Vimeo 视频：
<iframe
className="w-full aspect-video rounded-xl"
src="https://player.vimeo.com/video/VIDEO_ID"
title="Vimeo video player"
allow="autoplay; fullscreen; picture-in-picture"
allowFullScreen
/>将 VIDEO_ID 替换为任意 Vimeo 链接中的数字 ID（即 vimeo.com/ 之后的数字）。allow 属性为嵌入播放器授予全屏和画中画权限。
对于 YouTube 视频，请使用专用的 <YouTube> 组件，而不是原始 iframe。它会延迟加载播放器，并去除相关视频推荐。
常见嵌入内容
从 CodePen 的 "Embed" 按钮获取嵌入 URL。default-tab 参数控制首先显示的面板（result、html、css 或 js）。
<iframe
height="400"
style={{width: '100%'}}
src="https://codepen.io/USERNAME/embed/PEN_ID?default-tab=result"
title="CodePen Embed"
allowFullScreen
/>CodeSandbox 嵌入支持通过查询参数设置字体大小、主题以及要显示的文件。sandbox 属性控制 iframe 允许执行的操作。CodeSandbox 需要多项权限才能在浏览器中运行代码。
<iframe
src="https://codesandbox.io/embed/SANDBOX_ID?fontsize=14&theme=dark"
style={{width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden'}}
title="CodeSandbox"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>打开 Figma 文件，点击 Share，然后点击 Get embed code。将 URL 填入 src 属性。Figma 嵌入的高度请设为 450px 或更高，过矮会截断工具栏。
<iframe
style={{border: '1px solid rgba(0, 0, 0, 0.1)'}}
width="100%"
height="450"
src="https://www.figma.com/embed?embed_host=share&url=FIGMA_URL"
allowFullScreen
/>从任意 Loom 分享链接中复制视频 ID（即 loom.com/share/ 之后的字符串）。Loom 嵌入默认会在鼠标悬停时自动播放。
<iframe
src="https://www.loom.com/embed/VIDEO_ID"
width="100%"
height="400"
allowFullScreen
/>