将自适应宽高大小的iframe视频嵌入博客网页

想将视频嵌入到博客网页中，但是发现博客网站或生成器没有提供包装好的方法。在经过搜索后，发现可以尝试使用直接插入 html 代码的方法在博客网页中嵌入视频

实现嵌入自适应视频 HTML 代码

视频网站通常会提供用于嵌入视频的 iframe 标签 html 代码，将该代码嵌入网页中并实现视频显示大小自适应的完整代码如下，在 html 文件或 markdown (需要解析器支持) 等支持 html 代码的地方都可以使用。

 1
  定义 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>

现在直接将代码直接放入内容中，效果如下。可以发现虽然视频成功嵌入了，但显示效果不好，这显然不是我们想要的。