博客内插入bilibili视频
原理
使用iframe标签,更改其中src的aid和cid,使其对应要插入的视频,即可在文章内插入bilibili视频
获取cid
aid即为视频的av号,cid有两种获取方式,一是通过bilibili分享按钮直接可以看到嵌入代码,将代码内的cid复制即可(推荐),二是通过网页源代码查看(之前没有注意到到还能直接从分享按钮里看)。
这里简单介绍一下通过网页源代码看的方法:
- 右键,查看网页源代码(不能F12,F12看不到cid)
- ctrl+f 搜索cid,即可找到对应的cid。
插入方法
使用tinymce编辑器,选择编辑html原代码,插入以下代码即可
<iframe src="//player.bilibili.com/player.html?aid=对应aid&cid=对应cid&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="95%" height="450">
</iframe>
注:不建议直接使用bilibili的嵌入代码,样式较丑,当然你会自己调的话也可以
示例
示例使用Umika的“秋山澪与折木奉太郎的爱情故事 // Our Tapes”,非常棒的AMV,绝对的神作
博客内插入bilibili视频的更多相关文章
- 使用Scribefire在博客中插入语法高亮
效果如下, 文字1 int cool void main() { cout<<"hello world!"<<endl } 文字2 经过一番折腾,终于搞定了 ...
- hexo博客如何插入图片
Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定. Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令. hexo new '文章'就会生成一个 ...
- 如何在博客中插入jsfiddle的代码
1.进入官网:https://jsfiddle.net/ 可以看到如下界面,顶端的控制按钮包括:保存,运行,代码格式化等: 2.将html.css.js分别写在指定的位置当中,最后一个框result是 ...
- 使用Markdown在博客里插入代码
今天尝试了一下在线使用Markdown编辑器写博客,发现想要实现下面这样的效果还真得折腾一会儿. <html> <head> <meta charset="ut ...
- 手把手教你在CSDN博客中插入图片之剑走偏锋系列
1.在博客园注册账号.你没有看错,就是博客园,在图像上传方面博客园比CSDN这个垃圾强太多了. 2.在博客园进入随笔撰写编辑模块,点击上传图像按钮(点最黄的那个,别点错了). 3.弹出如下窗口 ,点击 ...
- 使用Scribefire在博客中插入语法高亮 II
效果如下, 这是我们在Scribefire中添加的code按钮,单击此按钮,则会出现 在codeHere中直接输入代码就可以了. 查看html 可以看到,其中已经添加了<pre>标签. 下 ...
- Hexo博客中插入 Chart 动态图表
该文基本(全部)来自于chatjs中文文档 由于使用pjax,导致页面需要二次刷新才会显示表格,故引入了自动刷新的JS,但这样会导致回退标签失效 背景 今天在谷歌上逛博客时,突然发现shen-yu大佬 ...
- myblogplus 第二期 慕舲原创 如何删除官方在你博客内设置的所有广告
问题描述: 文章下方广告渐多了起来,这也无可厚非,原来只有小小一幅的,毕竟博客园团队很卖力,博客园首页不是在更新吗,博问也在推广(虽然解答者不多,提问者很多) 不过无疑很影响美观,那些可以让他设置,不 ...
- 如何在发布博客时插入复杂公式——Open Live Writer
1.http://latex.codecogs.com/eqneditor/editor.php 2.使用Word发布
随机推荐
- NYOJ-22-素数求和问题
原题地址 素数求和问题 描述 现在给你N个数(0<N<1000),现在要求你写出一个程序,找出这N个数中的所有素数,并求和. 输入 第一行给出整数M(0<M<10)代表多少组测 ...
- IOS UIButton常用属性
//1.添加按钮 UIButton *nameView=[UIButton buttonWithType:UIButtonTypeCustom]; //nameView.backgroundColor ...
- 【洛谷4424】[HNOI/AHOI2018] 寻宝游戏(位运算思维题)
点此看题面 大致题意: 给你\(n\)个\(m\)位二进制数.每组询问给你一个\(m\)位二进制数,要求你从\(0\)开始,依次对于这\(n\)个数进行\(and\)或\(or\)操作,问有多少种方案 ...
- 【洛谷2152】[SDOI2009] SuperGCD(Python好题)
点此看题面 大致题意: 给你两个长度\(\le10000\)的正整数,让你求它们的\(gcd\). Python 高精请绕道. 这题的正解应该是Python. 对于这种高精题,肯定是Python最方 ...
- 使用OpenFileDialog组件打开对话框
实现效果: 知识运用: OpenFileDialog组件的ShowDialog方法 public DialogResult Show () //返回枚举值 DialogRrsult.OK 或 Di ...
- android studio 安装以及遇到的一些问题
1 安装 jkd ,版本一般是最新的,下怎么样的看一下自己电脑符合那种要求,可以去官网下 https://www.oracle.com/technetwork/java/javase/download ...
- javaweb基础(28)_jstl的核心标签
一.JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 二.JSTL标签库的分类 核心 ...
- AngularJS 数组
AngularJS数组就像Javascript数组 <!DOCTYPE html><html><head><meta http-equiv="Con ...
- 关于Star UML
为什么是使用Star UML而不是Visio 2013呢? 以前本人在大学期间使用的Visio 2013来绘制UML的,最近一个星期因为在阅读源码,所以有多学了一门UML绘制工具—Star UML,下 ...
- display :inline-block 处理点小障碍
使用inline-block之前先处理点小障碍:inline-block元素会有4px左右的空隙,这个是因为我们写代码时候的换行符所致. 解决办法很简单:在inline-block的父元素中设置样式f ...