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 的播放器页面
