怎么自适应插入bilibili视频
侧边栏壁纸
  • 累计撰写 36 篇文章
  • 累计收到 18 条评论

怎么自适应插入bilibili视频

Hrlni
2020-11-22 / 0 评论 / 108 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年01月05日,已超过1178天没有更新,若内容或图片失效,请留言反馈。

介绍

用过哔哩哔哩的朋友都知道,这个平台视频种类多,最重要的还没有广告,在自己的网站文章中插入B站视频无疑是很不错的选择了。

但是呢,直接复制B站的代码粘贴的话,手机端还可以,电脑会很小,对用户不是很友好,像这样:

修改版分享代码插入演示


修改后的分享代码已经实现了自适应,不管是电脑版还是手机版都不会出现太大或者太小,无法全屏的问题

下面是修改版的代码。

<iframe src="//player.bilibili.com/player.html?aid=457514397&bvid=BV1c5411L79v&cid=250662580&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<script type="text/javascript">  
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";
</script>

将你要分享的视频里面的aid=后面都需要更改你可以先分享拿到iframe代码里面会有完整的地址,将其替换即可。
[alt type="warning"]请将js代码放到合适的位置[/alt]

我是放在我主题自定义js代码里面的,不需要添加script标签
如果你的一个文章里需要多个bilibili视频的话请添加多个js代码并将spkjid更改为spkj,spkj1,spkj2依此类推,记得iframe标签里面的spkj也需要更改

0

评论 (0)

取消