一种文章挂载哔哩哔哩视频更简洁的方式

今天测试了一下文章内嵌视频，包括哔哩哔哩和Youtube，做个总结。

哔哩哔哩

直接使用官网的内嵌代码，视频会挤成豆腐块大小。网上的解决方案主要来自文章 《typecho文章挂载Bilibili视频响应式代码》 。

文章发布于 2019 年，采用的是固定 em，并做了好几种适配。到了 2021 年初，Chrome 88 新增支持 css 的 aspect-ratio 自适应比例，很快 Firefox、Safari 也支持该写法，所以可以改进为：

.iframe_video {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
}

内嵌视频代码稍作修改：

<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid={AID}&page=1&danmaku=0&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

添加 class="iframe_video" 。
酌情添加 danmaku、 high_quality 、sandbox 等。

Youtube

同样也可以使用 class="iframe_video" 调整。

Youtube 主要是官方播放器臃肿，使用 WP YouTube Lyte 插件，可在点击后再加载完整播放器。

其它

以上代码可以用于任何宽度撑满的模块，不局限于挂件类型。