iframe嵌入BiliBili视频方法B站视频外链

1. <iframe src=“//player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&danmaku=0“ allowfullscreen=“allowfullscreen” width=“100%“ height=“500“ scrolling=“no” frameborder=“0“ sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts”></iframe>

1. BILIBILI 地址PC端参数
2. &danmaku=0 (1=打开弹幕 0=关闭弹幕)
4. iframe 参数
5. allowfullscreen=“allowfullscreen” #移动端全屏
6. sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts” #禁止弹出网页

API调用

普通BV视频地址例如：https://www.bilibili.com/video/BV1Xt411n7iJ 

普通AV视频地址例如：https://www.bilibili.com/video/av60016166

普通多P视频地址例如：https://www.bilibili.com/video/BV1w4411179v/?p=2

可直接输入BV、AV、EP编号如下

视频号： av60016166 || BV1Xt411n7iJ

多P视频号： av66821481?p=2 || BV1w4411179v/?p=2

外链播放：https://xbeibeix.com/api/bilibili/biliplayer/?url=【这里输入BV号】

直接frame

给主题添加自定义样式

将以下代码添加到主题的自定义CSS里

1. /*视频挂载*/
3. .iframe_video {
4. position: relative;
5. width: 100%;
6. }
8. @media only screen and (max-width: 767px) {
9. .iframe_video {
10. height: 15em;
11. }
12. }
14. @media only screen and (min-width: 768px) and (max-width: 991px) {
15. .iframe_video {
16. height: 20em;
17. }
18. }
20. @media only screen and (min-width: 992px) and (max-width: 1199px) {
21. .iframe_video {
22. height: 30em;
23. }
24. }
26. @media only screen and (min-width: 1200px) {
27. .iframe_video {
28. height: 40em;
29. }
30. }
32. .iframe_cross {
33. position: relative;
34. width: 100%;
35. height: 0;
36. padding-bottom: 75%
37. }
39. .iframe_cross iframe {
40. position: absolute;
41. width: 100%;
42. height: 100%;
43. left: 0;
44. top: 0
45. }

复制视频源代码

打开B站视频网页，找到如下嵌入代码然后复制
<iframe src="//player.bilibili.com/player.html?aid=11932135&cid=19697229&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

修改代码

复制嵌入代码到文章需要放置的位置。然后在给iframe这个标签添加class="iframe_video"

`