原理

使用iframe标签,更改其中src的aid和cid,使其对应要插入的视频,即可在文章内插入bilibili视频

获取cid

aid即为视频的av号,cid有两种获取方式,一是通过bilibili分享按钮直接可以看到嵌入代码,将代码内的cid复制即可(推荐),二是通过网页源代码查看(之前没有注意到到还能直接从分享按钮里看)。

这里简单介绍一下通过网页源代码看的方法:

  1. 右键,查看网页源代码(不能F12,F12看不到cid)
  2. ctrl+f 搜索cid,即可找到对应的cid。

插入方法

使用tinymce编辑器,选择编辑html原代码,插入以下代码即可

<iframe src="//player.bilibili.com/player.html?aid=对应aid&amp;cid=对应cid&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="95%" height="450">
</iframe>

注:不建议直接使用bilibili的嵌入代码,样式较丑,当然你会自己调的话也可以

示例

示例使用Umika的“秋山澪与折木奉太郎的爱情故事 // Our Tapes”,非常棒的AMV,绝对的神作

博客内插入bilibili视频的更多相关文章

  1. 使用Scribefire在博客中插入语法高亮

    效果如下, 文字1 int cool void main() { cout<<"hello world!"<<endl } 文字2 经过一番折腾,终于搞定了 ...

  2. hexo博客如何插入图片

    Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定. Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令. hexo new '文章'就会生成一个 ...

  3. 如何在博客中插入jsfiddle的代码

    1.进入官网:https://jsfiddle.net/ 可以看到如下界面,顶端的控制按钮包括:保存,运行,代码格式化等: 2.将html.css.js分别写在指定的位置当中,最后一个框result是 ...

  4. 使用Markdown在博客里插入代码

    今天尝试了一下在线使用Markdown编辑器写博客,发现想要实现下面这样的效果还真得折腾一会儿. <html> <head> <meta charset="ut ...

  5. 手把手教你在CSDN博客中插入图片之剑走偏锋系列

    1.在博客园注册账号.你没有看错,就是博客园,在图像上传方面博客园比CSDN这个垃圾强太多了. 2.在博客园进入随笔撰写编辑模块,点击上传图像按钮(点最黄的那个,别点错了). 3.弹出如下窗口 ,点击 ...

  6. 使用Scribefire在博客中插入语法高亮 II

    效果如下, 这是我们在Scribefire中添加的code按钮,单击此按钮,则会出现 在codeHere中直接输入代码就可以了. 查看html 可以看到,其中已经添加了<pre>标签. 下 ...

  7. Hexo博客中插入 Chart 动态图表

    该文基本(全部)来自于chatjs中文文档 由于使用pjax,导致页面需要二次刷新才会显示表格,故引入了自动刷新的JS,但这样会导致回退标签失效 背景 今天在谷歌上逛博客时,突然发现shen-yu大佬 ...

  8. myblogplus 第二期 慕舲原创 如何删除官方在你博客内设置的所有广告

    问题描述: 文章下方广告渐多了起来,这也无可厚非,原来只有小小一幅的,毕竟博客园团队很卖力,博客园首页不是在更新吗,博问也在推广(虽然解答者不多,提问者很多) 不过无疑很影响美观,那些可以让他设置,不 ...

  9. 如何在发布博客时插入复杂公式——Open Live Writer

    1.http://latex.codecogs.com/eqneditor/editor.php 2.使用Word发布

随机推荐

  1. Visual Studio 2015 终于还是装上了

    win8.1系统 vs2015.preview_ult_CHT.iso 大小4.46G, http://download.microsoft.com/download/9/9/1/99133C05-3 ...

  2. yum安装软件并保留下载的软件

    使用yum插件downloadonly下载安装软件需要的依赖包并保留到指定的文件 安装yum-downloadonly或 yum-plugin-downloadonly 软件包. yum instal ...

  3. HDU3371 Connect the Cities

    题目描述: 有n个小岛,其中有的小岛之间没有通路,要修这样一条通路需要花费一定的钱,还有一些小岛之间是有通路的.现在想把所有的岛都连通起来,求最少的花费是多少. 输入: 第一行输入T,代表多少组数据. ...

  4. JPA将查询结果转换为DTO对象

    前言 JPA支持使用@Query自定义查询,查询的结果需要字节用DTO对象接收,如果使用HQL的查询语句,可以将直接将DTO对象的构造方法传入hql中,直接转为DTO对象:而如果使用native sq ...

  5. 安装Ubuntu桌面环境后只能Guest登录的解决办法

    1.安装Ubuntu桌面环境后,登录界面只显示了Guest 2.在登录界面按住crtl+shift+F1,进入tty模式 3.输入sudo -s进入root模式 4.输入vi /etc/lightdm ...

  6. ambari过程中要求各个节点时间同步

    设置时间同步 控制节点机器 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime #设置时区为北京时间,这里为上海,因为centos里面只有上海... ...

  7. 区块链工作 jd

    https://www.lagou.com/jobs/4096098.html 技术咨询网站: https://mp.weixin.qq.com/s/hs37UZFGI3uR4qmQ7v346g## ...

  8. java基础面试题:try{}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会被执行,什么时候被执行,在return前还是后?

    package com.swift; public class Try_Catch_Finally_Test { public static void main(String[] args) { /* ...

  9. [未完] term.js 记录遇到的问题

    参考博文:https://www.cnblogs.com/zhenfei-jiang/p/7065038.html 按照网上查找的资料敲了代码 term.on('data', function(dat ...

  10. zabbix告警时间和恢复时间相同的解决方法

    出现原因:在动作,恢复操作中,恢复时间成了{EVENT.DATE} {EVENT.TIME},所以和告警时间相同. 解决方法:将{EVENT.DATE}{EVENT.TIME}改成{EVENT.DAT ...