104_typecho插入B站(iframe)视频填坑

发布时间 2023-09-24 18:10:28作者: 游佚

这是一篇原发布于2020-01-11 14:07:00得益小站的文章,备份在此处。

前言

B站默认给的插入代码不好用,这里收集了几个解决方案。

B站链接参数

来源:https://blog.csdn.net/xinshou_caizhu/article/details/94028606
https://player.bilibili.com/player.html?aid=83006718&cid=142003476&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: 关闭

调整清晰度跳转B站

high_quality 参数直接填1,改为1080p。

或者直接通过设置 iframe 的 sandbox 属性去禁止
sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts

自动等比缩放

来源:https://www.potatofield.cn/【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频/
首先,定义一个CSS类,handsome主题用户可以在后台直接设置。

.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类的块内容把iframe包起来——

<div class="aspect-ratio">
    <iframe></iframe>
</div>

分p视频跳转错误

待解决