警告
本文最后更新于 2021-12-08，文中内容可能已过时。
想将视频嵌入到博客网页中，但是发现博客网站或生成器没有提供包装好的方法。在经过搜索后，发现可以尝试使用直接插入 html 代码的方法在博客网页中嵌入视频
视频网站通常会提供用于嵌入视频的 iframe 标签 html 代码，将该代码嵌入网页中并实现视频显示大小自适应的完整代码如下，在 html 文件或 markdown (需要解析器支持) 等支持 html 代码的地方都可以使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!--
定义 iframe-container 的 CSS 样式
插入多个视频时也只需要定义一次
也可以放在引入的 CSS 文件中
iframe-container 可任意改名，前后一致即可
-->
<style type='text/css'>
.iframe-container {
/*
padding-top 为高/宽的值
16:9 为 9/16=56.25%
*/
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
<!--将视频网站的嵌入代码用 iframe-container 的 div 标签包裹起来-->
<div class="iframe-container">
<!--这里放入网站提供的 iframe 代码
<iframe> </iframe>
-->
</div>
|
以 bilibili 为例，Hugo 原生并没有提供插入 bilibili 视频的 shortcode。因此我们需要自己手动插入视频。
我们在 bilibili 的视频页面的分享按钮中找到提供的嵌入代码
1
| <iframe src="//player.bilibili.com/player.html?aid=722153828&bvid=BV1KS4y197BN&cid=455022263&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
|
现在直接将代码直接放入内容中，效果如下。可以发现虽然视频成功嵌入了，但显示效果不好，这显然不是我们想要的。
继续完善 HTML 代码，放入文章内容中，让我们再看看效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <style type='text/css'>
.iframe-container {
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
<div class="iframe-container">
<iframe src="//player.bilibili.com/player.html?aid=722153828&bvid=BV1KS4y197BN&cid=455022263&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
|
可以发现，现在视频显示占满网页，宽度与高度的比例固定为设定好的 16:9，能够跟随网页显示变化自动调整显示尺寸。这样，无论是在桌面端还是移动端，都能有良好的显示效果了。
为了缩减对源文件篇幅的占用，可以去除无用的空格和换行符。
1
| <style type='text/css'>.iframe-container {padding-top: 56.25%;position: relative;}.iframe-container iframe {position: absolute;height: 100%;width: 100%;top: 0;left: 0;}</style><div class="iframe-container"><iframe src="//player.bilibili.com/player.html?bvid=BV1KS4y197BN&page=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>
|
只插入一个视频时， CSS 也可以写到 div 和 iframe 标签内。(虽然也没节约多少长度)
1
| <div style="padding-top: 56.25%;position: relative;"><iframe src="//player.bilibili.com/player.html?bvid=BV1KS4y197BN&page=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute;height: 100%;width: 100%;top: 0;left: 0;"></iframe></div>
|
使用哪一种可以根据个人喜好选择。
优点
- 通用性高，不依赖额外插件
- 迁移时文章内容一般不需要另外处理即可保持不变
缺点
- 使用不太方便
- 内容不直观
- 占用 markdown 源文件内容篇幅多(虽然可以通过去除无用空格和换行符缓解)
吐槽下 bilibili。
虽然 bilibili 提供了嵌入视频代码，但给的质量挺抠的，用复制的代码默认播最低画质 360p，只有手动在 src 地址后加上 high_quality=1 参数才会默认播高画质，而这画质最高也只给 720p，点 1080p 就自动跳转到 bilibili 自己的网站内了。
另外在桌面端显示时，页面尺寸小就变成手机页面，没法使用进度条和弹幕开关等控制栏，而页面尺寸大就固定显示进度条和发弹幕底栏，没啥用又占空间，一点又跳到 bilibili 自己的网站去了。体验实在是一般。
人家 YouTube 嵌入就好很多，清晰度没搞限制，网络好就自动给你选最好的，控制栏不占空间，页面尺寸变化能很好地适应，可以自动读取 YouTube 账号登陆状态并交互。基本可以直接正常播放使用。
放个视频来对比一下