网页内嵌入哔哩哔哩视频

哔哩哔哩的视频没有开头广告，国内不多的适合嵌入网页内的视频分享网站。只是嵌入的视频比例有问题，高度不正确，而且分辨率主要360p，有点难看。本文说下如何解决。

等比例问题

这个比较简单只需要在ifame签外套一个div包好比例和大小就行了，在css文件内添加如下style：¹

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 76%;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.aspect-ratio高度设为0, padding-bottom变成父元素宽度值的76%，div里面的iframe百分百宽高，填满固定比例的父div。
博客里面把哔哩哔哩的嵌入代码贴入自定义的div里面就行了：

<div class="aspect-ratio">
    <iframe src="//player.bilibili.com/player.html?aid=69363347&cid=120216833&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

嵌入高清视频

默认的分辨率只有360p不能看，只需要在链接地址末尾的page=1后面加上&high_quality=1就行了，如上面代码所示，清晰度默认变为480p，如果登陆过哔哩哔哩，默认为用户设置的最高清晰度播放。

更方便的分享

wordpress后台重用块

可以在wordpress后台文字编辑器把这个代码块保存为重用块就行了，每次插入这个已经保存的块，把嵌入代码考进去就行了

使用sublime添加一个snippet

如果离线用sublime写就更方便了，可以写一个snipet，只需要复制粘贴链接的aidcid那部分就行了，依次点菜单栏Tools | developer | new snippet，便新建了一个snippet了，把下面的代码粘进去就行了：

<snippet>
    <content><![CDATA[
<div class="aspect-ratio">
    <iframe  src="//player.bilibili.com/player.html?aid=${1:71004537&cid=123028244}&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
$0
            ]]>
   </content>
    <tabTrigger>mdb</tabTrigger>
    <description>bilibili 方便嵌入修改后的代码</description>
</snippet>

保存到sublime的user文件夹下，名字为mdb.sublime-snippet
打mdb按tab键就会自动蹦出来代码块,直接粘贴aid=之后&page之前的那部分地址就行了。

写一个小插件

写一个小插件，复制完后源嵌入代码一个快捷键就行了，依次点菜单栏Tools | developer | new pluguin，粘贴下面代码：

import sublime
import sublime_plugin

import re
class SnipCommand(sublime_plugin.TextCommand):
    def run(self, edit,**args):
        if "mdb" in args:
            m = sublime.get_clipboard()
            pattern = re.compile(r'aid=(.*)&page=1')
            try:
                new = '''<div class="aspect-ratio"><iframe  src="//player.bilibili.com/player.html?aid={}&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>
                 '''.format(pattern.search(m).group(1))
                self.view.insert(edit, self.view.sel()[0].begin(), new)
            except Exception as e:
                sublime.error_message("请先复制bilibili的分享链接，再使用快捷键")

在sublime的Data\Packages目录下新建文件夹Snip，以上代码保存到这个问件夹，文件名为Snip.py，一个插件就制作成功了。点菜单栏Preferences | Key bindings，添加快捷方式：

{"keys": ["alt+shift+b"], "command": "snip", "args": { "mdb": "mdb"}},

保存后，复制哔哩哔哩的嵌入代码，按alt+shift+b快捷键就自动粘贴符合我们格式的html代码啦。

其他方式

如果会写浏览器的插件最好是写个插件一键复制修改。

最终效果