导航

遇见美好的明天,书写最棒的故事~

侧边栏
最新评论
北熙宝宝@Hikurn_Xi
2024-08-11 17:33
@广树:(╯‵□′)╯︵┴─┴
松鼠大大
2024-08-10 17:39
😂惨兮兮北熙,╮( •́ω•̀ )╭
广树
2024-08-10 17:08
下一步,进入腾讯域名黑名单
北熙宝宝@Hikurn_Xi
2024-07-29 13:31
@寒寒:那你考虑过cloudflare的网络情况么?很大的话获取到一半超时获取失败...另外在目前的情况下,我觉得不支持webp的设备和终端软件都可以被淘汰了,不应该我去做向下兼容,也不在我的网站的服务群体内。【兼容性参照: https://caniuse.com/webp,除去IE和很久的,基本都兼容了】
寒寒
2024-07-29 13:17
不过话说…… 既然都用CF了,OSS的出口流量只要配置了CF代理就是免费的呀…还在乎什么流量 寒寒相比起来,还是更在意webp的兼容性 所以就算用webp也最好有一个png/jpg fallback
寒寒
2024-07-29 13:14
恭喜北熙宝宝~~ 终于搞定了吗?
北熙宝宝@Hikurn_Xi
2024-07-23 20:53
@小满1221:欢迎来到女子寮!你的标准房开好了~请入住~
北熙宝宝@Hikurn_Xi
2024-07-23 20:47
@小满1221:|´・ω・)ノ我就用了一点点itdog的那个屏蔽测速脚本
小满1221
2024-07-23 11:04
我解决了,没事儿了
小满1221
2024-07-23 10:47
我去佬,我把我自己博客快速测试测死力,负载4000%多,求教程(´இ皿இ`)
谷歌广告

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

作者:北熙宝宝@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>

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