博客里的视频通常用 iframe 嵌入。为了让视频在手机和电脑上都铺满容器,需要用一段 CSS 保持 16:9 比例。
编辑器工具栏里有一个“视频”按钮,插入下面的代码即可:
<div class="video-wrap">
<iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ"
title="视频标题" loading="lazy" allowfullscreen></iframe>
</div>下面是实际效果(示例为 Blender 基金会出品的《大雄兔》):
视频加载会拖慢页面,所以我把 iframe 都加上了 loading="lazy",滚动到附近才开始加载。