WordPress插入B站视频

在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;
}

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注