别急别急!我马上就来了!
导航
侧边栏
最新评论
北熙宝宝@Hikurn_Xi管理员
2025-10-06 11:07
@虫不知喔:hi,欢迎大佬“虫不知喔”入住女子寮。友情链接将会在1h内更新。
北熙宝宝@Hikurn_Xi管理员
2025-10-06 11:06
@车牌吉凶:╮(╯▽╰)╭ 可是六个核桃不好喝
北熙宝宝@Hikurn_Xi管理员
2025-10-06 11:05
@尐菟姫:ヾ(≧∇≦*)ゝ
车牌吉凶
2025-09-21 21:13
多喝六个核桃,哈哈
尐菟姫
2025-09-15 13:14
好久不见🎉
当季追番
暂无内容
阅读中
加茂さんは喋らない 〜隣の席の寡黙少女が无茶するから危なっかしくて放っておけない〜
99分神作
日轻加茂さんは喋らない 〜隣の席の寡黙少女が无茶するから危なっかしくて放っておけない〜
2022年1月01日 0时 ~ 阅读中
已累计阅读3年9个月
无口少女真的太棒啦!
标记:参与翻译
ワンルーム、日当たり普通、天使つき。
98分神作
日漫ワンルーム、日当たり普通、天使つき。
2024年4月01日 0时 ~ 阅读中
已累计阅读1年6个月
暂无内容
악당들에게 키워지는 중입니다
92分神作
韩漫악당들에게 키워지는 중입니다
2024年4月02日 0时 ~ 阅读中
已累计阅读1年6个月
《被恶棍们抚养中》女主卡哇伊!!!
転生七女ではじめる异世界ライフ 〜万能魔力があれば贵族社会も余裕で生きられると闻いたのですが?!〜
91分神作
日轻転生七女ではじめる异世界ライフ 〜万能魔力があれば贵族社会も余裕で生きられると闻いたのですが?!〜
2022年5月01日 0时 ~ 阅读中
已累计阅读3年5个月
七女别闹了!
【推しの子】
90分神作
日漫【推しの子】
2023年4月10日 0时 ~ 阅读中
已累计阅读2年6个月
太赞了!
選個美男做爸爸
90分神作
韩漫選個美男做爸爸
2024年4月15日 0时 ~ 阅读中
已累计阅读1年5个月
暂无内容
这一世我来当家主
暂无评分
韩漫这一世我来当家主
2024年6月07日 10时 ~ 阅读中
已累计阅读1年4个月
暂无内容
攻略中
暂无内容
谷歌广告

如何给网站引入正常大小的哔哩哔哩播放器?

作者:北熙宝宝@Hikurn_Xi时间:2019-12-04 22:55:25

开场

Ⅰ:直接引用代码来实现

<link rel="stylesheet" href="https://api.beixibaobao.com/css/bilibili-player/bofangqi.css"
<iframe src="//player.bilibili.com/player.html?aid=74725430&cid=127822972&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=74725430&cid=127822972&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

Ⅱ:把代码加载自己的网站来实现

/*下方是视频挂载*/

.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=74725430&cid=127822972&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

我们将 iframe 后面加上这个:class="iframe_video"

就变成了这样:

<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=74725430&cid=127822972&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

然后就可以正常访问啦~(自动适配手机端的大小)