我目前使用的 Hexo(3.2.2)主题是Aero-Dual。这个主题使用的了 bootstrap。

因为偶尔需要在博客中贴上内嵌视频,所以我在 Hexo 官网文档查到了tag-plugins嵌入视频的 tag:

{% youtube youtube_id %}

但是在这个主题中使用 YouTube tag 时并没有正常生效,显示的视频是固定大小非响应式,直接破坏了排版@_@...
添加自定义的class可以处理这个问题,使用div将 YouTube 内嵌视频的<iframe>代码包裹起来,通过定义class属性使视频自适应网页排版。修改Aero-dualbootstrap.css添加.video-container

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

像下面这样添加自适应视频:

<div class="video-container">
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/aHjpOzsQ9YI" frameborder="0" allowfullscreen>
    </iframe>
</div>

在 Hexo markdown 文档中直接写 html 并不是一个很好的解决办法(要在设置文档中关闭 markdown 对 html 的解析),而且手写原生代码效率低下。但是贴内嵌视频这个功能我只是偶尔用到,所以能保证完美实现就好啦~


参考链接:
[1] siongui.github.io
[2] avexdesigns.com