WordPress文章内嵌入B站视频自适应

在B站上打开需要引用的视频页面，在视频播放器下方找到【分享图标】—>【选择嵌入代码】—>【复制文本内容】

在WorePress文章编辑中，选择【作为HTML编辑】，粘贴刚才复制的B站嵌入代码

在其<iframe src元素标签中增加class属性，如：<iframe class=”iframe_video” src

之后在主题模板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
}