WordPress教程 · WPtech

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

小编 · 9月5日 · 2020年

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

WordPress文章内嵌入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
}

实现设备自适应~

0 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!