wordpress怎么自适应插入bilibili视频
前几天新酱在做另一个站的时候需要插入B站的视频,但是随后发现了一个严重的问题,bilibili的分享代码在wordpress上不会自适应,这就很麻烦了,经过测试bilibili给的分享代码只有在手机版才会适应,在电脑版只有很小的一块。
原版分享代码插入演示
这里我用原版的分享代码插入来形成一个对比。原版的分享代码可以在下图的位置得到。
1 |
<iframe src="//player.bilibili.com/player.html?aid=63007904&cid=109443932&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> |
修改版分享代码插入演示
修改后的分享代码已经实现了自适应,不管是电脑版还是手机版都不会出现太大或者太小,无法全屏的问题,下面是修改版的代码。
1 2 3 4 |
<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=你要分享的视频AV号&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe> <script type="text/javascript"> document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px"; </script> |
将你要分享的视频av号在代码中替换,av号就是bilibili链接里av后面的一串数字,比如我上面插入的视频链接是:
1 |
https://www.bilibili.com/video/av63007904/ |
63007904就是这个视频的av号。
2019年11月24日 下午12:28 板凳
非常感谢大佬!
2019年12月2日 下午2:17 1层
@李君南 不客气。
2019年11月4日 下午8:02 沙发
非常感谢!相比于修改主题的代码,还是更喜欢这种方式!
2019年12月2日 下午2:19 1层
@简直药丸 不用客气。O(∩_∩)O哈哈~