Hexo博客引用B站视频
![](https://img.examcoo.com/ask/7386438/202112/163897318350010.png)
AI-摘要
Chat GPT
AI初始化中...
介绍自己 🙈
生成本文简介 👋
推荐相关文章 📖
前往主页 🏠
前往爱发电购买
Hexo博客引用B站视频
Jerry Zhou引言
在进行引用B站用iframe方式引入视频时发现,通过默认的方式导入会使得屏幕很小。
效果
方法
- bilibili默认给的是一个iframe,在iframe中添加css样式:
style="position:absolute; height: 100%; width: 100%;"
- 在原来的iframe外面嵌套一层div,div添加样式:
style="position:relative; padding-bottom:75%"
1 | <div style="position:relative; padding-bottom:75%; width:100%; height:0"> |
在 bvid
后填上视频的bv号即可。
效果
原理
- iframe本身不可自动伸缩
- iframe宽度和高度设置为100%后,会尽可能的填充满它的父级元素
- 所以在iframe外部嵌套一个div,只要这个div根据页面大小变化按比例变化,就可以实现了
- iframe使用绝对位置
position: absolute
, 默认与父级div的左上角对齐 - div使用相对位置,并且用
padding-bottom
,来计算相对父元素的宽度(父元素宽度的75%作为div的高度),100:75则为4:3
其它
B站链接参数
key | 说明 |
---|---|
aid | 视频ID,即B站的av号 |
bvid | 视频ID,即B站的bv号 |
单元格 | 单元格 |
cid | 客户端的id,clientid的缩写。不填也不会有什么问题 |
page | 第几个视频,也就是P几 |
as_wide | 是否宽屏(1:宽屏,0:小屏) |
high_quality | 视频质量(1:最高视频质量,0:最低视频质量) |
danmaku | 是否开启弹幕(1:开, 0:关闭) |
阻止跳转B站
在网页上, 用户选择清晰度, 或者点击视频上面的一些图标, 会跳转到B站. 这个可通过设置iframe的 sandbox
属性去禁止
添加 sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
进行设置
效果
修改视频质量
B站默认视频质量是最低的,可以通过在src的最后添加 &high_quality=1
来设置为最高视频质量
效果
评论
匿名评论隐私政策