Wordpress原比例插入bilibili视频

教程大全B站

如果自己插入过B站视频的话基本都会遇到过视频播放显示不全的问题。

B站视频下放给出的默认嵌入代码是:

<iframe src="//player.bilibili.com/player.html?aid=925341116&bvid=BV1gT4y1V7VR&cid=181133425&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

直接用这个代码插入后是这样的:

 

其实只需要改一下嵌入代码即可

 

使用下方两种代码嵌入:

我们使用过程中将//player.bilibili.com/player.html?aid=925341116&bvid=BV1gT4y1V7VR&cid=181133425&page=1这个视频地址换成你要插入的地址即可。

第一种

<iframe id="spkj" src="//player.bilibili.com/player.html?aid=925341116&bvid=BV1gT4y1V7VR&cid=181133425&page=1"
 width="100%" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; 
overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
 </iframe> 
<script type="text/javascript"> document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px"; </script>

效果如下:


第二种

<iframe src="//player.bilibili.com/player.html?aid=925341116&bvid=BV1gT4y1V7VR&cid=181133425&page=1" width="100%" height="500" frameborder="0" scrolling="no" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" allowfullscreen="allowfullscreen"></iframe>

效果如下:

 

 

Posted by 柴郡猫