B 站官方视频分享代码,无法在手机端进行等比缩放的展示和播放。
站长决定写一个自适应 B 站视频调用的教程出来,分享给不会调用的小伙伴儿们。话不多说,下面上教程内容:
因为在 CSS 中无法实现等比高度,所以,我们可以借助 js 代码内容,我们可以给这个 iframe 标签加一个 id,然后再写一段对应的 js 代码,比如我们设定一个j2mmvideo的 id,则代码变为:
<iframe id="j2mmvideo" src="//player.bilibili.com/player.html?aid=969951173&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
同时,我们还要在我们的主题 footer 中,加入以下代码
<script type="text/javascript">
if(document.getElementById("j2mmvideo")){
document.getElementById("j2mmvideo").style.height=document.getElementById("j2mmvideo").scrollWidth*0.64+"px";
}
</script>
这段代码的意思就是视频显示高度是宽度的 0.64 倍,经过站长调用调试发现,这个 0.64 是最佳的比例值!
调用效果如下:
到这里,我们网站调用的 B 站视频,就可以自适应了,不必担心手机端查看时因为设置了固定高度而不能正常显示了!
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://j2mm.com/typecho-docs/14.html