html添加B站视频,iframe嵌入BiliBili视频方法B站视频外链

iframe嵌入BiliBili视频方法B站视频外链BILIBILI 地址PC端参数

&danmaku=0 (1=打开弹幕 0=关闭弹幕)

iframe 参数

allowfullscreen="allowfullscreen" #移动端全屏

sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页属性值描述leftrighttopmiddlebottom不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。

10规定是否显示框架周围的边框。

pixels%规定 iframe 的高度。

URL规定一个页面，该页面包含了有关 iframe 的较长描述。

pixels定义 iframe 的顶部和底部的边距。

pixels定义 iframe 的左侧和右侧的边距。

frame_name规定 iframe 的名称。

“”allow-formsallow-same-originallow-scriptsallow-top-navigation启用一系列对 iframe 中内容的额外限制。

yesnoauto规定是否在 iframe 中显示滚动条。

seamless规定 iframe 看上去像是包含文档的一部分。

URL规定在 iframe 中显示的文档的 URL。

HTML_code规定在 iframe中显示的页面的 HTML 内容。

pixels%定义 iframe 的宽度。

API调用

外链播放：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这个标签添加class="iframe_video"

`

`

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

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

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

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