wordpress 插入高清bilibili视频代码

文章目录[隐藏]

阻止跳转到B站
演示效果

目前国内大多数视频网站都提供了分享的途径，对于嵌入到其他网页的分享大多采用iframe。iframe是HTML的一个标签，它支持在HTML页面中以框架的形式显示来自其他网页的内容。通过使用iframe，你可以把来自视频网站的播放器嵌入到你的网页。这篇笔记主要讲的是如何在网页中嵌入来自哔哩哔哩的视频。

使用代码的方式就可以直接实现，其实我们一般调用b站的视频直接使用调用就可以了。基本不需要使用向上面这么折腾直接调用就可以了。其他的视频也是使用框架直接调用即可！其他的mp4等视频的话建议使用插件实现即可

B站链接参数
https://player.bilibili.com/player.html?cid=57016129&aid=57016129&page=1&as_wide=1&high_quality=1&danmaku=0

KEY	说明
aid	视频ID,就是B站的 avxxxx 后面的数字
cid	应该是客户端id, clientId 的缩写(推测的, 不一定准确) 经过测试, 这个字段不填也没关系
page	第几个视频, 起始下标为 1 (默认值也是为1) 就是B站视频, 选集里的, 第几个视频
as_wide	是否宽屏 1: 宽屏, 0: 小屏
high_quality	是否高清 1: 高清, 0: 最低视频质量(默认) 如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p high_quality=1 是最高1080p
danmaku	是否开启弹幕 1: 开启(默认), 0: 关闭

自定义一个CSS，添加到主题中。

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

.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

在aspect-ratio类中，宽度被设为100%，高度被设为0，padding-bottom属性（外部下边距）被设为75%。因为当padding-bottom的值为百分比时，百分比计算的基准为父元素的宽，而aspect-ratio类的宽度为父元素宽度的100%，所以它的外部下边距也就占宽度的75%。这样，aspect-ratio类的实际宽高比（包含边距的宽高比）就变为了四比三。另外，aspect-ration类的position必须定义为relative，保证它的定位是相对于原始位置定义。

在aspect-ratio类下的iframe元素宽高都被设为100%。因为当元素的position属性设为absolute且width和height属性的值为百分比时，百分比计算基准分别为父元素包含外边距的款和高。所以，此时iframe元素会沾满整个aspect-ratio类的父元素，也就是形成四比三的宽高比。

定义完CSS之后，进入哔哩哔哩视频页获取iframe代码中的 aid 和 cid 码修改到下面代码汇中。