第五篇：图文与 YouTube 视频混排测试
这篇文章专门测试 Hugo 博客在长文中嵌入 YouTube 视频时的实际阅读效果。
需要观察的重点包括：
- 视频宽度是否和正文协调；
- 手机端是否能够自适应；
- 视频上下留白是否自然；
- 图片、视频和文字交替时是否显得杂乱；
- Dark Mode 下视频区域是否协调。
开场
图文博客如果以后涉及户外、骑行、旅行或者软件演示，单靠文字和图片有时候并不足够。
视频能够承担另外一种信息表达方式。
比如一段骑行路线、一段露营过程，或者一个软件操作流程，都更适合直接通过视频展示。
下面先放一张图片。
图片测试：正文和视频之间插入一张宽幅照片。
第一段 YouTube 视频
下面使用 Hugo 自带的 YouTube shortcode：
上面这段视频主要用来观察：
- 视频播放器是否自动居中；
- 宽度是否超过正文；
- 16:9 比例是否保持正常；
- 手机浏览时是否能够自动缩放。
如果播放器能够自然嵌入正文，这种方式以后就可以直接用于博客。
视频前后连续正文
视频播放完以后，继续回到文字。
理想情况下，视频不应该破坏整篇文章的阅读节奏。
对于长文来说，视频更适合作为一个内容节点。
比如：
前面用文字解释背景，中间通过视频展示过程，后面再继续分析。
这种结构对于教程、旅行记录和项目复盘都很有用。
图文视频交替
再测试一次：
图片测试：图片之后立即嵌入视频。
下面再嵌入一个 YouTube 视频：
这一段主要测试图片和视频连续出现时的间距。
理想效果应该是：
文字 → 图片 → 图注 → 视频 → 文字
各部分之间有明显层次，但又不会留出过大的空白。
视频与二级标题
视频以后还可能直接放在章节下面。
例如：
骑行记录
这里写一段骑行路线说明。
然后放视频：
视频下面继续补充文字说明。
这时候主要观察标题、正文和播放器之间的距离是否协调。
视频之外仍然需要文字
视频最大的缺点之一，是检索效率比较低。
读者如果只想知道一个结论，看视频可能需要几分钟。
所以我的理想方式仍然是：
- 文字负责观点和结构；
- 图片负责视觉信息；
- 视频负责过程和现场感。
三种媒介各自承担不同任务。
引用测试
视频不应该替代文章，而应该成为文章的一部分。
如果以后写户外文章，可以先用文字交代路线和背景，再放 GoPro 视频，然后继续写自己的感受和总结。
这种方式比单纯贴一个 YouTube 链接完整得多。
最后一段视频
最后再嵌一个视频，测试长文章后半部分的显示情况：
如果这一页整体显示正常，那么以后 Hugo 博客嵌入 YouTube 基本就没有技术障碍了。
结语
这篇文章测试的是一种比较接近真实使用场景的结构：
文字 → 图片 → 视频 → 文字 → 图片 → 视频 → 长文。
以后真正写文章时，不建议为了丰富页面而强行加入视频。
只有当视频能够提供文字和图片无法有效表达的信息时，再嵌入视频。
这样文章会更干净，也更耐读。