hexo中以iframe形式插入视频无法显示的问题解决

---

前言

最近在学习hexo，欲向文章中插入视频链接，经过一番查找，最终选择以iframe形式插入，但无法进行显示

一、文章参考

作者：DHUtoBUAA
链接：https://www.jianshu.com/p/9b4d5903dfc8
来源：简书

作者：smile-yan
链接：https://blog.csdn.net/smileyan9/article/details/124268248
来源：csdn

作者：克豪
链接：http://t.csdn.cn/RiYZK
来源 :csdn

二、问题解决

1.按照文章插入代码

{% raw %}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=90978812&cid=155358422&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;" ></iframe></div>
{% endraw %}

作者：DHUtoBUAA
链接：https://www.jianshu.com/p/9b4d5903dfc8
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

此时页面效果：

可以看到未显示内容

2.尝试修改元素样式

（1）在浏览器中打开开发人员工具，这里使用的是edge，按下ctrl+shift+i即可打开

（2）在开发人员工具中的上方导航栏选择“元素”（一般默认就是“元素”），如下所示

（3）左键单击代码部分，然后按下ctrl+f查找iframe

绿色高亮处就是插入的iframe代码

（4）点击高亮的iframe代码块，会发现开发人员工具下方的样式布局改变，且元素中的iframe代码块最后会出现“== $0”字样，此字样表示当前选择的元素

（5）可以单击或双击上图中样式中的任一项，例如element.style中的position，会发现该项前面出现勾选框，单击该勾选框取消勾选，此时若有效，页面会出现改变。

勾选position时的效果：

此处将position取消勾选后，页面发生变化

取消勾选position后的效果：

可以看到页面内容变高了，但依旧无法显示视频

（6）若页面未发生改变，可以尝试改变不同的勾选组合，若iframe代码块的样式勾选排列都尝试了一遍依然无法显示，可以尝试选择iframe外围的div或更高级的元素进行勾选组合

（7）若更改勾选项目后视频显示但无法完全显示（如下图），请尝试更多的勾选组合

例如iframe元素的父元素div，将div的element.style的position取消勾选（注意此处选择的是div，“==$0”此时在div的后面）

（8）在尝试足够的选项后，或许能够发现合适的勾选组合，若未发现有效组合，可尝试学习css，对iframe及其父类的宽高进行修改，（ps：在开发人员工具中点击样式的某一项空白处可以进行进行项目的添加（如下图））

3.在源文件中修改布局

（1）找到hexo根目录下themes文件夹中当前使用的主题

我这里使用的是Quiet，如果不知道当前主题是什么，可以在hexo项目的根目录下找到_config.yml打开，在该文件中按下ctrl+f查找“themes”

（2）找到需要修改的第2点中相应样式的文件，可能为ejs结尾，也可能为css结尾，查找的过程因hexo主题内容而不唯一，因此无法提供准确路径，大都是在当前使用的主题文件夹下的layout或source中。hexo的布局由多个不同的文件组成，其中就包含了样式文件，具体可参考https://blog.csdn.net/smileyan9/article/details/124268248

（3）因为在尝试多种勾选组合后发现视频效果都不尽人意，打算直接修改元素的宽高。这里以找到的iframe的父元素div的父元素div(注意并没有打错，的确是叠加了两层的父元素)为例

a.如图选择了div

b.向其中添加样式，width：100%

视频已可以正常显示

c.在主题文件中找到该iframe的父元素div的父元素的div在布局中的位置，此处是在themes\Quiet\layout_partial\post_centent.ejs中

<div class="article-content">
    <div id="article" class="content" >
        <%- page.content %>
    </div>
</div>

注意此处page.content就是我们在hexo文章中的内容，按照第一篇参考文章，这里插入的是，此时iframe外层已经有了一层div

{% raw %}
<div style="position: relative;width: 100%;height: 0;padding-bottom:75%;">
    <iframe src="//player.bilibili.com/player.html?aid=768683345&bvid=BV1wr4y187Gv&cid=711032837&page=1" 
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute;width: 100%;height: 65%;">
    </iframe>
</div>
{% endraw %}

因此我们要找的div应该是下方代码的第二行的div（即iframe的父元素div的父元素div）

<div class="article-content">
    <div id="article" class="content" >
        <%- page.content %>
    </div>
</div>

d.为其添加样式 width=100%，这里添加样式的方式有多种，可以参考这篇文章

http://t.csdn.cn/RiYZK

<div class="article-content">
    <div id="article" class="content" style="width: 100%;">
        <%- page.content %>
    </div>
</div>

e.修改保存后重新部署

hexo clean && hexo g 

f. 本地查看修改

hexo s

g.视频成功显示

三、总结

对于hexo插入iframe后无法显示的问题，可以通过开发人员工具进行样式修改，而后在hexo项目中找到对应主题的样式进行修改。
ps：强烈建议学习css后进行再进行操作！
ps：当然在开发人员工具中进行修改源文件也可以，使用的时候会发现开发人员工具上跳出
可以按照其提示进行操作，在浏览器端对样式进行直接的修改并保存。