Hexo之给Fluid主题中的博文嵌入Youtube视频iframe并实现自适应尺寸

概要

有时候想在博客中插入Youtube视频，而官方分享链接给的是含有固定尺寸(如 width=’560’,height=’315’)的，直接插入到hexo中发现超出了文章边缘，如图。

但如果直接对width和height进行调整，定制桌面端尺寸，则在手机端还是会出现不合适的情况：

---

因此我们考虑使用自动调整的方法，引入css文件，核心代码为：

• css代码段：

  .video-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
  }
  .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

• 文章代码段：

  <div class="video-container">
      <!-- 下面这个iframe即从youtube网站上获取的iframe代码 -->
      <iframe width="560" height="315" src='...' ... ></iframe>
  </div>

---

熟悉hexo的朋友应该已经知道怎么操作了，下面我为不太熟悉hexo特别是不熟悉fluid的朋友一步步地详细介绍一下过程。

详细步骤

1. 获取youtube视频iframe代码

先访问到youtube对应视频的网址，在网页中可以看到分享按钮，点击后选择“嵌入”，最后复制代码即可，如图：

到此我们成功复制了上面提到的ifame代码，接下来我们去创建css代码段

2. 创建css代码段

注：以下vim操作可被任何文件浏览器应用替代，只要能实现修改和保存文件即可。

hexo的不同主题对于自定义css的应用各有不同，具体请参照各自的文档，在此我们以Fluid为例，应用css代码

在Fluid的文档中Fluid自定义CSS可以看到自定义css的实现方式：

进入fluid主题下的_config.yml进行修改：

输入

vim themes/fluid/_config.yml

按”/“进入查找模式，输入custom_css按回车，找到我们刚刚看到的图片中的位置，按”i”进入插入模式，在”custom_css:”后面输入 /css/custom.css，然后按”Esc”退出插入模式，输入”:wq”后按回车即可。

创建/css/custom.css文件

修改完配置后，在 themes/fluid/source/css 下创建/修改 custom.css 文件：

vim themes/fluid/source/css/custom.css

然后加入上面提到的css代码段(按”i”进入插入模式，完成后按”Esc”退出插入模式，输入”:wq”后按回车保存)：

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

3. 将css应用到需插入youtube的文章中

其实也不用做什么，只要在对应文章的markdown文件中需要插入youtube视频的位置用

<div class="video-container">
    <!-- 下面这个iframe即从youtube网站上获取的iframe代码 -->
    <iframe width="560" height="315" src='...' ... ></iframe>
</div>

替换

<!-- 下面这个iframe即从youtube网站上获取的iframe代码 -->
<iframe width="560" height="315" src='...' ... ></iframe>

即可

4. 大功告成！

创作不易，欢迎到评论区交流！