在Wordpress文章中插入B站视频,先在B站播放页面,找到视频分享的嵌入代码,然后用插入html代码的办法编辑。
<div class="bilibili-video-container">
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113963199106818&bvid=BV1wSNPe9EE8&cid=28266333964&p=1"
frameborder="0" allowfullscreen="true">
</iframe>
</div>
然后在主题的CSS中加入如下控制代码
/** --------------------------------------------------------------------------------- *
* bilibili播放自适应大小
* --------------------------------------------------------------------------------- */
.bilibili-video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
padding-top: 30px; /* Optional: Add top margin */
height: 0;
overflow: hidden;
}
.bilibili-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}