有时候需要将B站的视频插入到wordpress文章的网页中，但又不想安装插件，有没有直接插入视频的方式？答案是肯定的。主要包含两个步骤：获取视频的嵌入代码，将代码插入到wordpress文章。

步骤1：获得B站视频的嵌入代码

图1 从B站视频获得嵌入代码

到B站的某个视频下，图1所示，点击”分享”，下面的”嵌入代码”，点击复制后，就可以得到如下的html代码。

1
<iframe src="http://player.bilibili.com/player.html?aid=838599752&bvid=BV1Mg4y1v7Fi&cid=202178304&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

步骤2：嵌入代码插入到wordpress文章

wordpress后台编辑文章时，图2 中选择”自定义html”模式，然后粘贴上述代码。

图2 wordpress后台编辑文章时选择”自定义html”模式

然后，更新网页后，虽然视频可以正常播放，但是存在明显的问题，视频大小不能适配网页大小的问题，如图3所示视频远小于整个文章页面的大小，如何调整上述的代码使得视频窗口可以适配文章的页面宽度？不仅能适配PC的网页，还能适配手机屏幕呢？

图3 视频大小与wordpress文章页面不适配

解决方法也不复杂，只需要在原有的代码中增加div标签和postion属性即可，具体的代码修改如下：

1
2
3
<div style="position: relative; padding: 30% 45%;" >   
<iframe src="http://player.bilibili.com/player.html?aid=838599752&bvid=BV1Mg4y1v7Fi&cid=202178304&page=1" />
</div>

主要的代码修改在于：

  • 1.将整个iframe放置在div中，div的position设置为relative，并且设置padding；
  • 2.iframe内部再增加关于position的设置，属性设定参考上述代码；

再次更新保存后，查看网页，可以发现B站视频长宽可以同时适配PC和手机网页。