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

<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>

BILIBILI 地址PC端参数
    &danmaku=0   (1=打开弹幕 0=关闭弹幕)

iframe 参数
    allowfullscreen="allowfullscreen" #移动端全屏
    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里

/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

复制视频源代码

打开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"

`
`

 赞  赏

如果觉得我的文章对你有用，请随意赞赏

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开   或者 扫一扫，即可进行扫码赞赏哦