吉原哀歌 外一篇（ WordPress 引用 Bilibili.tv 视频方法）

今天，我学会了如何用 <div> 配合 <iframe> 剽窃别人网站上的内容并且只显示所需，隐藏掉不需要的内容=。=

引用方法更新，请到 <这里> 查看。

对于提供了引用代码的网站来说，无论想把所需的内容引用到微博、校内甚至自己博客上都是非常容易的。之前写的 Warcraft 历代视频那篇博客也作了尝试，非常简单。

但对于没有提供这一功能，且页面功能比一般视听类网站复杂些的网站内容来说，要想引用就显得有点困难了。比如 Bilibili.tv。

Q： 如何把 Bilibili.tv 的视频引用到自己的博客上，且保持弹幕特色完整？

尝试一：显然是找站点自身的对外分享功能了，结果似乎证明他们的 PM 就是不想提供这样的功能……

尝试二：通过关键词找到 KnH 曾经做过一个 KnDanmakuWP v1.0-BETA 的 WP 插件，兴冲冲地下载安装完按说明，在文章中插入吉原哀歌视频的引用代码，结果……失败。再仔细一看，发现该插件自 2011 年 8 月 5 日出道以后就再没有更新过，估计是 bilibili 网站的代码已经更新而插件没有跟上。

尝试三：考虑到插件还有另外一种方式，即引用 B 站弹幕功能同时引用新浪视频，即文字内容和视频内容分开引用的方式。这一方式要求用户自行解析出 B 站视频源的真实地址，于是问题又化归到查看 B 站网页端源代码上了。经搜索后……又失败了。网页代码中标示视频的 cid 无法还原成真实 id，网上有的老教程也都只解释了针对 bid、uid、ykid 等的反演算。显然，B 站为了保持自己的竞争特色（弹幕字幕评论系统），走了一条与通常视听类网站相反的方式，并不追求共享，反而力图通过加密等方式把用户聚到自己的网站下，绝不为他人做嫁衣装。

尝试四：直接 Copy B 站网页源代码。定位播放器代码段以后，把整个 <div>……</div> 内的所有内容直接复制到了博客文章的源代码下。结果……还是失败。原因任何一个前端工程师甚至只要对代码有点理解的小朋友可能都很明白，但以我的这点知识，真的不知道为啥。

尝试五：于是祭出大杀器 —— <iframe>

部分引用不行，那我就把整个网页都搬过来就行了！思路是：

<iframe style="width: 569px; height: 440px;" scrolling="no" src="http://www.bilibili.tv/video/av337840/" position = x: 460 px; y : 0 px>

—— iframe 引用整个页面，设置成指定大小，并定位到所需的位置。 当然最后一段 position 那个是假的，因为第五次失败的原因就出在这里。iframe 是没有办法定义内部引用页面的显示位置的。不过到这里，离胜利已经很接近了，因为思路是正确的。

尝试六：（内事问百度，外事翻墙也要问 Google）果然在 Google 上找到了答案。代码如下：

<div style="width: 569px; height: 440px; overflow: hidden; position: relative;"><iframe style="position: absolute; top: -460px; left: 0px;" src="http://www.bilibili.tv/video/av337840/" scrolling="no" width = "1000 px" height = "1000 px"></iframe></div>

简单地说，既然 iframe 无法定位内部位置，就让它全部展现（我设置了 1000*1000 px），然后再在外面套上一个指定长宽的 <div>，然后设置遮盖方式，最后再调整 iframe 与 div 之间的相对位置，使得需要显示的部分恰好位于 <div> 之下，如图。当然，中间还涉及一些像素级的长宽位置调整，有个像素尺软件会好很多。

至此，剽窃成功，大功告成回家吃饭。