Chapter Text
本教程只提供代码模板，音频/视频/GIF/图片链接转换需自己准备
音频：
<figure>
<figcaption>【Listen to the 音频名称】</figcaption>
<audio controls src="【音频.mp3】"></audio>
</figure>
【】和里面的内容替换成你的内容
如果写进ao3之后发现代码变了，一般都是 AO3 自动加的安全性能相关辅助代码，不会影响你页面显示和音频功能。能动就行。
↓下为示例
星际穿越
↓第二个示例
GIF嵌入，会自动播放
<div style="text-align: center;">
<img src="https://i.meee.com.tw/wP3tdkp.gif"
alt="Ending animation"
style="width: 100%; max-height: 500px;">
</div>
加粗字体为替换内容
建议找到能清晰转换gif的网站，不然像素都会压缩得很厉害
效果如下
视频嵌入比较复杂
首先一般链接不能直接嵌入，不是你代码问题
❌ 是 AO3 不允许外链视频播放，只允许上传图片
建议嵌入：Vimeo（邮箱直接注册，页面简洁简单）
YouTube（稳定，但注册麻烦，我没用过）
本便签以Vimeo为示范，网址：https://vimeo.com
注册过程不多赘述了
Vimeo上传好视频后，打开视频页面 → 点击 “Share” → 复制 Embed 代码
⚠️ 注意：
要用分享功能得到 player.vimeo.com/video/ID
不能直接复制页面链接
自适应居中，适应电脑与手机屏幕（带折叠）
【】和里面的内容替换成Embed代码
<details>
<summary>▶ 点击播放录像</summary>
<div align="center">
<iframe
src="【https://player.vimeo.com/video/ID】"
width="100%"
height="500"
style="max-width:900px; border-radius:16px;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
</details>
效果如下（需要点击打开）
▶ 点击播放录像
</details>
若不需要折叠，则选择此代码↓
<div align="center"><iframe src="【https://player.vimeo.com/video/ID】" width="100%" height="500" frameborder="0" allowfullscreen=""></iframe></div>
效果如下
给想知道原理自己拓展的小伙伴：
如果想附加下载功能，扔给chatGPT吧
如代码不能运行，检查Vimeo 隐私设置，是否允许嵌入，是否删掉代码里的 <script>。我的建议是善用ChatGPT助力你修改，告诉它这是应用在ao3的它会改好
详细解释：allow="autoplay; fullscreen; picture-in-picture"
叫做 iframe 权限声明（Permissions Policy）
它的意思是告诉浏览器：这个嵌入的视频播放器被允许使用哪些功能
autoplay：允许视频自动播放
fullscreen：允许用户点击“全屏”按钮
picture-in-picture：允许画中画模式（小窗口悬浮播放）
iframe 是什么？
它是在当前网页里嵌入一个“外部网页”
你嵌入的不是“视频文件”
而是 Vimeo 的“播放器网页”
src = 来源地址
这表示：这个 iframe 要加载 Vimeo 的播放器页面