免插件在WordPress文章中插入bilibili视频

在博文里插入视频，可以大大增加文章的可读性和说服力。之前我曾用优酷来分享视频，但不支持HTTPS、广告时间太长等严重缺陷导致我被迫放弃使用，转而使用bilibili视频（B站）。不过，外链的bilibili视频代码尽管没有广告，但仍有默认清晰度较低、默认出现弹幕、播放画面过小等问题，那有没有办法可以无需使用WordPress插件，仅仅用优化后的代码插入bilibili视频到文章中，实现完美的自适应播放呢？答案是当然有！

代码如下——

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=(aid值/视频ID值)&bvid=(bvid值/视频编号值)&cid=(cid值/客户端ID值)&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>

下面我们介绍如何无需插件，在WordPress文章中插入bilibili视频。

在你需要插入的任一bilibili视频中，点击页面播放器下方的“转发”链接，找到“嵌入代码”并复制。嵌入代码格式如下——

<iframe src="//player.bilibili.com/player.html?aid=45847374&bvid=BV1Yb411i7AU&cid=80336292&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

将其中的  //player.bilibili.com/player.html?aid=45847374&bvid=BV1Yb411i7AU&cid=80336292&page=1  复制出来，替换我所提供的代码，链接包含aid、bvid、cid和page值。

参考代码如下：

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=45847374&bvid=BV1Yb411i7AU&cid=80336292&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>

代码可根据个人需要自由修改，本代码有以下优点：

1.自适应PC、Mac、iPad、手机等终端的游览器；

2.默认打开宽屏模式；

3.关闭恼人的弹幕功能；

4.默认启用高清晰度播放，如视频支持1080P，以1080P清晰度播放；

5.更改清晰度，或点击播放器的图标等情况，不会跳转到bilibili主站；

6.除了支持WordPress，还支持Typecho、Hexo、Ghost等支持HTML代码的程序。

这段是某时尚博主在海外旅行的Vlog，视频播放效果如下——

本文参考：

1.《关于博客园内嵌入bilibili视频》 ；

2.《关于接入B站iframe视频(bilibili引用视频)》 ；