使用jekyll include在wechaty博客中快速插入视频

撰写暑期2020中期POC博客的时候，遇到了在博文中插入视频、PPT等iframe的需求，可以在markdown文档中直接使用bilibili等视频网站提供的视频嵌入代码，然而这样视频的样式不够美观，iframe没有铺满整个宽度并保持一定宽高比。

1. 背景

在lijiarui和Huan的建议下，参考之前的博客,应用如下样式插入iframe能够达到较为满意的效果(宽高比为16:9)。

<div class="video-container" style="
    position: relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
">
<iframe
  src="https://www.youtube.com/embed/ZYjYAT2g-1Q"
  width="560"
  height="315"
  frameborder="0"
  allowfullscreen=""
  style="
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
">
</iframe>
</div>

但是每次需要插入iframe的时候都插入这么一段代码未免太过复杂，之前我使用hugo写博客的时候经常使用shortcodes并传入一定的参数， 博客生成的时候会使用对应的HTML模板替换这段shortcodes。 经查询发现jekyll也有类似的特性，可以使用include标签来引入位于_includes文件夹里面的html片段，并且可以在include标签传入变量，在html模板中进行处理生成html片段，具体可以参考jekyll文档。

2. 使用include插入iframe

基本思想很简单，传入一个参数：iframe的地址或者视频的播放地址，利用上面带样式的iframe代码写成模板文件即可。

在Huan的建议下，在模板文件中使用liquid语法进行一些简单的逻辑判断，针对不同类型的iframe进行不同的处理，比如：

• bilibili视频的iframe有一个最上面的推荐栏，会导致iframe变高，使用16：9的比例不能使视频铺满，因此修改其宽高比为10:7,更具体得说，将.video-container这个div的padding-bottom改为70%。
• 插入pdf文件需要使用viewer.js进行渲染，需要在本地的pdf文件路径前加上/assets/js/viewer-js/#作为完整的iframe地址。
• 对于支持的视频网站，将视频的播放地址转化为视频的iframe地址

模板文件为_includes文件夹内部的iframe.html,具体内容如下