【教程】在自己的博客、网页中嵌入B站视频

笑

有些人可能会好奇，一些博客或者网页中的b站视频是怎么嵌入进去的，类似于这个效果

（视频在我b站推荐页随便找的，无其他意义）
其实很简单，如果是在网页中直接插入<iframe>标签即可，示例：

1. <iframe src='https://player.bilibili.com/player.html?bvid=1HcmgBJE9G&quality=16' border='0' scrolling='no' framespacing='0' allowfullscreen='true' style='max-width: 100%' width='500' height='375' frameborder='no'></iframe>

复制代码

可以自由设定宽、高
其中的1HcmgBJE9G是视频ID，稍后会讲获取方法（说实话也不用怎么讲）
而下面这个是按照你设置的宽高比例自动设定大小，默认是16:9

1. <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"><iframe src="https://player.bilibili.com/player.html?bvid=视频ID" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" frameborder="0" allowfullscreen></iframe></div>

复制代码

然后讲一下怎么获取视频ID，
其实很简单，直接在b站找到视频，复制链接，
https://b23.tv/BV1HcmgBJE9G
BV后面的1HcmgBJE9G就是视频的ID
然后要弄在博客中的话，首先得看你博客，是否支持直接解析b站的视频，或者是支持直接插入b站视频的外链播放器，如果是的话，直接用博客自带的就行了，如果不是的话，同样用上面的标签（前提是你的博客支持使用html标签）
比如我前段时间发的这个blog，虽然他也支持直接播放视频，但是播放的视频必须是直链，而不是b站外链，所以这个同样得使用iframe标签达到此效果
这是我当时测试留下的：https://blog.xiaow.qzz.io/article/test-markdown-html/
就不专门写个博客了，将就着看吧

wubaiwan

AC莫

看看隐藏

挽梦遗酒

刚刷到你这个蛋蛋视频

晚风知我意

看看隐藏

ZEROXZX

看看隐藏

青春向上

这有啥难的，找个ifreme标签指明src为play.bilibili.com

小小柚子

wms

感谢分享

Fix

看看隐藏

MW

感谢分享，看看隐藏

ofo

看一下

cwh

支持一下

静谧幻想家

看看