教程-在博客文章内插入喜欢的哔哩哔哩视频

Posted on 2020-04-26  6,888 Views 本文共1753个字


本文是交大家在博客文章内挂载 哔哩哔哩 视频的 教程,文章末尾可以直接观看插入的效果。

事实上在B站官网上点击分享时会提供iframe代码,方便大家可以在自己的网站之中嵌入视频,我们可以直接复制代码然后粘贴。

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

但是,添加到了网站里,就会发现它默认的样式只有很小的一块很丑,还需要我们手动给他添加widthheight属性,手动设置了固定的宽和高之后,显示正常,大功告成。但是你仅仅满足于此吗???

下面的教程可以直接帮你把b站的播放器都添加到你的网站哦。

添加css

将以下代码添加到主题自定义CSS里

/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

复制的嵌入代码

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

HTML 复制复制嵌入代码到你所写的文章当中需要放置 bilibili 视频的位置。然后在给iframe这个标签添加 class="iframe_video"位置如下:

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=视频AV号&amp;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>标签中加个class="iframe_video" -->

效果预览


粉色的花瓣,美丽地缠绕在身上。依在风里。